H5移动项目常见问题及注意事项

Question

H5移动项目会遇到那些坑 尽量写吧 大神们

Answer 1

第一个应该是自适应问题吧，自适应的方法有很多，但每种方法都多多少少有点坑：
用meta标签：
可以通过js，给页面添加meta标签：拿到当前视窗的宽度，和设计稿宽度做比，然后设置initial-scale。
坑，有些浏览器拿不到准确的device-width，缩放出来就有点崩。

用@media查询

似乎支持并不是很好，而且用@media (min-device-width:1024px) and (max-width:989px)这种去写，可能要写很多个宽度区间的样式。

用vw、vh
基本上就是按照页面百分比来算的，比较简单。
android4.4就支持了，然而UC浏览器会直接把这个单位吞掉。

rem
可以用js根据页面的宽度和设计稿的标准宽度做比，然后给html写入font-size(注意浏览器会有最小字号)，然后其余的元素根据这个字号来设置。
这个单位的支持较好，但意外的发现有些webview会缩放我们设置的字体大小……

还有就是一些很细节的坑，比如：
safari用transform要加-webkit-transform
safari对于fixed的兼容不好，尤其是做弹出键盘输入的时候。
safari中，label里面不要有别的标签元素，否则会触发不了其他input的点击，可以用before。
android的点击问题，因为手指点触有延时，会有那种点触穿透的问题。可以使用fastClick插件。