移动端HTML5开发与PC端的区别

移动端HTML5开发与PC端的区别

1. 背景

   1. 在做一个公司的需求时，需要开发一个移动端的静态HTML页，在我使用固有的PC端HTML开发思路开发完成后，被mentor要求尽量精简所有模块大小，同时把处理相关逻辑的JS代码并入HTML的<script>代码块中，并让我去了解移动端HTML5开发与PC端的区别和注意事项

2. 内容感谢

   1. 内容除个人外,整理于以下博客，非常感谢

      https://wenwen.soso.com/z/q913264680.htm

      http://aszhi.com/mobile/57.html

      https://www.zhihu.com/question/35518212，两位匿名知乎用户、ekko、毛绒球状闪电这四位的回答

3. 区别和注意事项

   1. 内核兼容性:

      1. 由于在移动端主要以webkit内核为主，另外再兼容chrome，uc，qq等浏览器,对于HTML5等新技术支持的更好，所以可以更大范围的使用新技术
      2. PC端的网页开发考虑的是浏览器的兼容性问题，例如需要兼容ie6~11，firefox，chrome，safari等多种不同内核的浏览器，使用到新特性的时候需要给样式加上最基础的兼容前缀，或出于浏览器兼容性的考虑，有些情况下限制了新技术的使用,所以最好的做法还是尽量避免使用新样式属性来完成预期的效果。

   2. 分辨率适配

      传统PC端的页面开发一般都会选择给页面设定一个固定宽度，两侧有留白，但是移动端的页面由于其载体手机屏幕比PC要小很多，一般都会选择尽可能多的在手机屏幕上显示内容，这就要求移动端页面要能够充分适应各种屏幕尺寸的手机并进行最大程度的利用。从这一点上来说移动端页面的适配难度更高一些。

      • 解决:
        1. 使用bootstrap,layui这种自适应的网页UI框架，根据设备的宽度不同显示不同的效果.缺点:框架较为臃肿,性能一般,在移动设备网络不稳定的条件下影响用户体验
        2. 主流做法:做2套UI再根据UserAgent等来分别显示不同的页面
        3. 偷懒做法:页面设计就以移动端UI为主,在移动端打开时使用@media 查询适配小分辨率

   3. 性能

      1. PC端的网络情况一般比较稳定，都是通过网线或者Wi-Fi连接网络;但是移动端就比较复杂，除了Wi-Fi，还有2G、3G、4G甚至是在几种不同的网络连接中交替切换也经常发生，不稳定的网络连接对页面性能带来的挑战是移动端的页面资源不能太大，否则在恶劣网络情况下时，页面将会无法访问 ，严重影响用户体验。
      2. 在手机上的300ms的延迟，这在PC端是没有的，如果我们希望做成webapp，那么自然就不需要这300ms的延迟，所以可以使用hammer-time.js来移除这300ms的延迟。

   4. 框架等资源选择

      1. 由于移动端网络情况的不稳定，导致我们在移动端页面框架选型时，一般只考虑小而美的框架;而web端相对选择的范围就比较大，一些比较重型的框架也可以根据项目需求加以考虑

         因为移动端的流量还是比较重要的， 所以引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差别还是挺大的。

      2. 框架选择:

         1. jQuery
            1. 移动端使用zepto.js,26KB,gzip后9.6K
               1. 官方文档:https://zeptojs.com/,中文文档:https://www.runoob.com/manual/zeptojs.html
            2. PC端jQuery2.0以上
            3. jQuery和zepto区别和注意事项
               1. https://www.jianshu.com/p/ab7ce303b7a6
               2. https://www.cnblogs.com/mlw1814011067/p/9461004.html
               3. https://www.cnblogs.com/wuguoyuan/p/zepto.html
               4. https://blog.csdn.net/weixin_42833042/article/details/87600217
               5. https://zhuanlan.zhihu.com/p/31604472
         2. 弹出层组件
            1. 移动端
               1. 对性能要求可用easyDialog.js,min版只有2KB可直接集成进HTML的script代码块中.https://www.jq22.com/jquery-info7721
               2. 无要求可用vpopup.https://www.cnblogs.com/xiaoyan2017/p/13776977.html
            2. PC端就没这么多限制,可用
               1. LayUI的layer.js,http://layui-doc.pearadmin.com/doc/modules/layer.html
               2. artDialog,http://aui.github.io/artDialog/
               3. vLayer,https://www.cnblogs.com/xiaoyan2017/p/13913860.html
         3. 单页面应用
            1. 移动端
               1. vue.js,gzip后20多K,https://v3.cn.vuejs.org/guide/introduction.html
            2. PC端随意选择
               1. vue.js
               2. bootstrap,https://v3.bootcss.com/getting-started/
               3. LayUI,http://layui-doc.pearadmin.com/doc/
               4. ext.js,https://www.w3cschool.cn/extjs/extjs_overview.html
               5. …

   5. 与NativeApp的交互

      1. 大多数PC网站没有，因为大多数PC网站没有对应的专门程序（不过也有淘宝或QQ等例外的例子）

      2. 移动端有以下注意事项

         1. APP内打开的网页不支持confirm,alert函数.

            移动端开发在进行WebView配置时,为了界面美观,一般都会默认将JS的confirm,alert函数禁用

            1. 解决:使用弹出层组件进行相关信息提示或操作

         2. window.close()函数不是完全兼容,PC端也没有返回事件的支持.

            1. 解决:如果APP内打开的网页,可以在网页内调用APP的原生JS方法,让APP完成关闭和返回事件

   6. 其他注意事项

      1. 移动端需要点击的元素及其间隔不能太小，考虑手指的面积
      2. 注意横屏和竖屏下的表现
      3. Retina 屏图片会不会模糊
      4. 输入状态键盘会不会挡住输入内容
      5. 某些浏览器（如 Safari）的隐私模式下 cookie 和 localStorage 的替代方案
      6. 触摸友好
      7. 用meta-viewport标签调节视口
         1. 视口（源自Peter-Paul Koch (江湖人称“PPK大神”)的理论）
            1. PC端：指浏览器的可视区域
            2. 移动端：则包括Layout Viewport（布局视口）、 Visual Viewport（视觉视口）、Ideal Viewport
      8. 触摸事件的处理。推荐一个库，hammer
      9. 尽情使用websocket吧，主流机型好像是都支持的
      10. 移动端调试很麻烦，详见这个：怎么在移动端调试web前端? - 计算机网络
      11. position:fixed不要随便用
      12. flexbox很棒，你不一定非得用Bootstrap之类的库
      13. 做小游戏为什么不优先考虑canvas呢

   7. 博客中提及推荐的双端H5开发框架

      1. mui: https://dev.dcloud.net.cn/mui/

         跟hbuilder一家公司出的，js和css都比较完善

         缺点是性能性能性能，两个webview叠上去就有点卡了

      2. Touch UI: http://www.wetouch.net/touchui_doc/