比较直接的几个方式如下:
- 手机设置———>开发者选项———–>开启显示布局边界,页面有布局的是native否则为h5页面;
- 长按页面,如果出现文字选择、粘贴功能的是H5页面,否则是native页面,我在我们自己的App里面试了一下是可以判断的。但是有一种情况,如果H5页面就是一张图片,那么是不能通过这个方法验证的。
- 抓包抓到url或者html的代码则肯定有 「H5」布局。
还有一些情况需要从native和h5的区别去判断了,区别如下:
- app和h5页面相比,拥有较少的页面跳转。网络环境一致的情况下,h5页面渲染是需要调取服务器的,但是app的渲染在本地,所以h5页面跳转更费力,不稳定感会强一些。所以h5页面想要减少跳转的话,一般都会使用交互技巧来隐藏文字。
- h5页面展示空间比app小,给使用者带来的记忆负担大于app。人的大脑能短期记忆,但是这样的记忆是不稳定的。如果用户在滚动翻阅屏幕的过程中,需要临时记忆的信息越多,他们的表现是会越差的。现在,只有很少的人会有耐心慢慢看完长长的内容,h5页面相对于app而言,多了浏览器导航所占用的屏幕空间。
- h5与app相比的优势在于h5页面可以随意的分享,而且迭代是很方便的,不同的系统只要适配一次即可。但是app的每次迭代需要在不同系统基础上迭代。
- h5页面与app导航设计不同。h5页面使原有底部导航消失,有效的导航遇到挑战。在设计要考虑导航设计,顶部底部或左右侧,还要考虑如何快速跳转回重要页面,导航快捷键:如顶部固定位置、悬浮圆圈或非首屏时页面右侧悬浮。而app的导航更直接方便。