赞
踩
背景
<script>
代码块中,并让我去了解移动端HTML5开发与PC端的区别和注意事项内容感谢
内容除个人外,整理于以下博客,非常感谢
https://wenwen.soso.com/z/q913264680.htm
http://aszhi.com/mobile/57.html
https://www.zhihu.com/question/35518212,两位匿名
知乎用户
、ekko
、毛绒球状闪电
这四位的回答
区别和注意事项
内核兼容性:
分辨率适配
传统PC端的页面开发一般都会选择给页面设定一个固定宽度,两侧有留白,但是移动端的页面由于其载体手机屏幕比PC要小很多,一般都会选择尽可能多的在手机屏幕上显示内容,这就要求移动端页面要能够充分适应各种屏幕尺寸的手机并进行最大程度的利用。从这一点上来说移动端页面的适配难度更高一些。
@media 查询
适配小分辨率性能
- PC端的网络情况一般比较稳定,都是通过网线或者Wi-Fi连接网络;但是移动端就比较复杂,除了Wi-Fi,还有2G、3G、4G甚至是在几种不同的网络连接中交替切换也经常发生,不稳定的网络连接对页面性能带来的挑战是移动端的页面资源不能太大,否则在恶劣网络情况下时,页面将会无法访问 ,严重影响用户体验。
- 在手机上的300ms的延迟,这在PC端是没有的,如果我们希望做成webapp,那么自然就不需要这300ms的延迟,所以可以使用hammer-time.js来移除这300ms的延迟。
框架等资源选择
由于移动端网络情况的不稳定,导致我们在移动端页面框架选型时,一般只考虑小而美的框架;而web端相对选择的范围就比较大,一些比较重型的框架也可以根据项目需求加以考虑
因为移动端的流量还是比较重要的, 所以引入的资源或者插件,能小则小,一个30k的资源和一个80k的资源,在移动端的差别还是挺大的。
框架选择:
与NativeApp的交互
大多数PC网站没有,因为大多数PC网站没有对应的专门程序(不过也有淘宝或QQ等例外的例子)
移动端有以下注意事项
APP内打开的网页不支持confirm,alert函数.
移动端开发在进行WebView配置时,为了界面美观,一般都会默认将JS的confirm,alert函数禁用
window.close()函数不是完全兼容,PC端也没有返回事件的支持.
其他注意事项
- 移动端需要点击的元素及其间隔不能太小,考虑手指的面积
- 注意横屏和竖屏下的表现
- Retina 屏图片会不会模糊
- 输入状态键盘会不会挡住输入内容
- 某些浏览器(如 Safari)的隐私模式下 cookie 和 localStorage 的替代方案
- 触摸友好
- 用meta-viewport标签调节视口
- 视口(源自Peter-Paul Koch (江湖人称“PPK大神”)的理论)
- PC端:指浏览器的可视区域
- 移动端:则包括Layout Viewport(布局视口)、 Visual Viewport(视觉视口)、Ideal Viewport
- 触摸事件的处理。推荐一个库,hammer
- 尽情使用websocket吧,主流机型好像是都支持的
- 移动端调试很麻烦,详见这个:怎么在移动端调试web前端? - 计算机网络
- position:fixed不要随便用
- flexbox很棒,你不一定非得用Bootstrap之类的库
- 做小游戏为什么不优先考虑canvas呢
博客中提及推荐的双端H5开发框架
mui: https://dev.dcloud.net.cn/mui/
跟hbuilder一家公司出的,js和css都比较完善
缺点是性能性能性能,两个webview叠上去就有点卡了
Touch UI: http://www.wetouch.net/touchui_doc/
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。