教你判断一个APP页面是原生的还是H5页面
关注公众号 前端开发博客,回复“加群”
加入我们一起学习,天天进步
刚好是周末,无意之间在收集相关资料的时候,发现有部分童鞋在问《如何判断一个APP页面是不是H5页面》或者是《如何判断app中原生页面和h5页面》等等类似的问题。
于是,为了帮大家解答这样的问题,特地花了不少时间研究了一下APP里面的原生页面和H5页面到底有哪些不一样。
不仔细去观察,一般人都不会察觉出来的,再加上现在的H5技术和原生应用的技术很多类似,或者说实现的效果很相像。
我们再来回顾一下:
如今最火的APP开发模式是Hybrid APP开发(即混合模式,半原生半H5页面)。
原生是Native APP
H5就是Web App
在Hybrid当中,如何快速的判断一个APP页面是原生的还是H5页面呢?综合网友的答案汇总整理了一下。如果你们还有更好的判断方法也可以告知我。
一、看断网的情况
把手机的网络断掉。然后点开页面。然后可以正常显示的东西就是原生写的。
显示404或者错误页面的是html页面。
二、看布局边界
可以打开 开发者选项中的显示布局边界,页面元素很多的情况下布局是一整块的是h5的,布局密密麻麻的是原生控件。页面有布局的是原生的否则为h5页面。(仅针对安卓手机适用)如下图所示:
三、看复制文章的提示
这个需要你通过对比才能得出结果,比如是文章资讯页面可以长按页面试试,如果出现文字选择、粘贴功能的是H5页面,否则是native原生的页面。
有些原生APP开放了复制粘贴功能或者关闭了。而H5的css屏蔽了复制选择功能等等情况。需要通过对目标测试APP进行对比才可知。
这个在支付宝APP、蚂蚁聚宝都是可以判断的。
四、看加载的方式
如果在打开新页面导航栏下面有一条加载的线的话,这个页面就是H5页面,如果没有就是原生的。微信里面打开我们的H5页面常见的有个绿色的 加载线条。如下图红框里面所示:
五、看app顶部 导航栏是否会有关闭的操作
如果APP顶部导航栏当中出现了关闭按钮或者有关闭的图标,那么当前的页面肯定的H5,原生的不会出现(除非设计开发者故意弄的)
美团的、大众点评的APp、微信APP当加载h5过多的时候,左上角会出现关闭2字。
六、判断页面 下拉刷新的时候(前提是要有下拉刷新的功能)
如果界面没有明显刷新现象的是原生的,如果有明显刷新现象(比如闪一下)的是H5页面(ios和android)。
比如淘宝的众筹页面。
七、下拉页面的时候显示网址提供方的一定是H5
如下图所示:
以上7点也是目前帮大家整理出来的比较容易判断的一个APP页面是原生的还是H5页面的方法。
希望可以帮到大家,以便更加容易区分原生APP页面和H5页面。
作者:25学堂
原文链接:http://www.25xt.com/appdesign/11851.html
相关文章
分享8个非常实用的Vue自定义指令
Vue这些修饰符帮我节省20%的开发时间
Vue路由权限控制分析
最后
转发文章并关注公众号:前端开发博客,回复 1024,领取前端进阶资料
回复「电子书」领取27本精选电子书
回复「加群」加入前端大神交流群,一起学习进步
回复「Vue」获取 Vue 精选文章
分享和在看就是最大的支持❤️
教你判断一个APP页面是原生的还是H5页面相关推荐
- 判断一个APP页面是原生的还是H5页面
1.看断网的情况 把手机的网络断掉.然后点开页面.然后可以正常显示的东西就是原生写的. 显示404或则错误页面的是html页面. 2.看布局边界 可以打开 开发者选项中的显示布局边界,页面元素很多的 ...
- js 弹出一个页面 html页面刷新,原生js刷新当前页面与跳转页面的几种方法及区别总结...
在面向浏览器的web开发过程中,我们经常与JavaScript打交道,web开发页面路由跳转.刷新当前页面更是经常遇到的事.浏览器提供了至少3-5种的方式可以实现当前页面刷新或者跳转当前应用的其他页面 ...
- 使用chrome devtools app(离线包)调试Android H5页面
在调试Android H5页面的时候时候Chrome自带的"Chrome://inspect"工具调试时,国内用户都面临不可用的问题. 不翻墙,实现chrome浏览器调试工具的 ...
- h5 默认为移动端页面_20条移动前端H5页面开发规范,h5开发必看文档
这是根据腾讯最新公布的<移动页面用户行为报告>来给大家分享的关于移动端H5页面开发一些20条规范和准则.里面大概包含了16种用户操作习惯和注意点. 下面25学堂跟大家先分享一张关于2016 ...
- h5 默认为移动端页面_移动端的h5页面的尺寸是多少
展开全部 H5的尺寸一般设计为640x1136px 既满足了显示需求,又能降低用户加载图片需要的带宽.32313133353236313431303231363533e78988e69d8331333 ...
- html页面弹出dialog,自定义H5页面dialog弹窗
弹窗一: 样式如下: HTML代码://弹出窗 通知 取消 确认 //遮罩层 $('.dialog .content').text(text); $('.dialog, .mark').removeC ...
- h5与小程序服务器如何辨别,小程序丨教你六招,快速区分H5页面还是APP页面
限制的H5技术和原生APP的技术很多类似或者实现效果很相像,不仔细去观察,大多人不会察觉两种有何不同.第九程序帮大家整理出比较容易判断的一个APP页面是原生的还是H5页面的方法. 希望可以帮到大家,以 ...
- 如何知道一个App的包名呢
如何知道一个App的包名呢?它的启动页的Activity又是什么呢? 之前博客里也忽略了这一块,这一节我就专门来介绍一下. 包名(Package name)在Android系统中是判断一个App的唯一 ...
- vue H5页面唤起手机app(iOS和Android),没有安装则跳转下载页面
现在好多的app应用都有对应的h5页面,那么h5和app直接是如何交互的呢? 这里使用的是Scheme协议. 什么是URL Scheme? android中的scheme是一种页面内跳转协议,是一种非 ...
最新文章
- JS代码报错 Uncaught SyntaxError: Unexpected token ,
- python数据收集系统_玩玩Python数据采集_001
- [51nod1376] 最长递增子序列的数量
- LeetCode每日一题 52. N皇后 II
- python学习并发编程
- nginx源码初读(1)--让烦恼从数据结构开始(ngx_cdecl/ngx_int/ngx_log)
- c51倒计时程序汇编语言,51单片机汇编程序:倒计时交通灯
- 纪中C组模拟赛总结(2019.7.6)
- 机器学习——统计学习方法——第1章 统计学习及监督学习概论
- HDU1880 魔咒词典【文本处理】
- Optisystem软件与Matlab软件的联合数据读取
- php如何打包成apk,windows下PHP批量生成打包android程序APK
- c语言作业的搜题软件下载,C语言题库app下载-C语言题库下载v2.3 安卓版-西西软件下载...
- glob库:文件名的匹配
- ES新特性之Reflect对象
- 传感器连接mysql_获取传感器数据并传入数据库-HTTP/POST/ASP.NET
- 四连涨!海尔智家这波私有化还有多大想象空间?
- 如何零基础学习法语,陈家桥法语零基础入门学习
- RatingDapp 数据周报 (2019/3/24 ~ 3/30)
- 使用 代码 读取 build.gradle 中的自定义配置信息
热门文章
- mPEG-SS 甲氧基PEG琥珀酰亚胺丁二酸酯
- 温度滞回程序C语言,间隙式粘滞阻尼器温度变化对滞回性能影响的研究
- 虚拟服务器如何接显示器,如何来实现一台主机带动六台显示器
- 巴别塔合约作战终端开发日记2——Linux系统部署项目
- C#练习题答案: 图片#1 - 重建巴别塔【难度:1级】--景越C#经典编程题库,1000道C#基础练习题等你来挑战
- java 抽象方法 大括号_为什么Java抽象类的方法必须加大括号?我写错了吗?
- UPnP实现中的常见脆弱性与风险分析
- 统计每天每个直播间的访客数、每天最大访客数的直播间
- ASSIST-GAI全色域指数计算工具
- ERP行业推荐参考书籍