1. js事件不同：click事件在移动端反应有300ms延迟，点击反应慢还会出现点透的bug。应尝试使用touch事件，或者使用fastclick.js库，也可以使用zeptojs中的tap事件。



2. 调试页面：使用chrome的模拟移动端工具，有时还要使用eruda、weinre真机调试工具。微信开发或者小程序请选择微信开发者工具。



3. 需要设置viewport：在header里使用

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
来控制屏幕全屏显示，且不能被缩放。



4. 字体规则：pc端使用的px在移动屏幕上不能很好的适应多分辨率，移动端改用rem字体单位。令 html{ font-size:62.5%; }，则1rem=10px。然后使用css3的媒体查询控制不同分辨率下html显示的倍数。

5. 最小点击区域44px：移动端是有最小点击识别区的，元素大小低于这个值时被点击是不会触发click事件的。

6. 可以调用硬件功能：可以通过设置a标签href类型来实现拨打电话、发送短信和邮件等功能。可以通过<input type="file">的accept 属性，调用本地图片或拍照。还可以使用html5的运动传感器数据事件实现微信摇一摇功能。

以上都是移动端和pc端的差异性，坑也提到了不少。如果想找学习资源，慕课网上有个《Hello，移动WEB》的教学视频，讲得挺好的。

记得的就这么多了，以后想到再回来写，希望对题主有用。斜眼笑 ：）


7. 忽略将页面中的数字识别为电话号码：

<meta name="format-detection" content="telephone=no" />


8. 屏幕旋转事件：window.orientation，取值：正负90表示横屏模式、0和180为竖屏模式

9. 虚拟键盘弹出导致 fixed 元素错位：虚拟键盘弹出（即onfucos事件触发）时将fixed改为static定位。

10. 可点击标签点击时有默认样式：a, button, input, optgroup, select, textarea 等标签点击时会出现一个 "暗色的"背景，可以使用以下代码去除

-webkit-tap-highlight-color: rgba(0,0,0,0);

11. 1px边框的实现：1. 背景图；2. translate 50%；3. gradient 渐变背景，50% 边框颜色，50% 透明；4. iOS 8开始，iOS 浏览器支持 0.5px 的 border（兼容性不好，只作参考）；

12. 安卓有些机型上设置字体line-height等于height时依然不能上下居中，是因为使用rem转换之后小于最小字号12px（可以先增大字号，然后translate缩回来）

13. 用css设置最多显示一行，多余显示省略号时第二行会出现一点字体头部（需要line-height:1.2；以上）

14. 不要在有 input 标签的页面使用 fixed 定位。在 iOS 上，当点击 input 标签获取焦点唤起软键盘的时候，fixed 定位会暂时失效（要保证 fixed 定位的节点的父节点不可滚动）

15. iphone动态生成html元素click失效。

16. transform: translate3d(x, y, z); 会开启硬件加速，解决页面闪白，保证动画流畅。

17. 由于IOS高清显示屏中的dpr比较高，像素点会由1个变为4个。所以保证长宽为偶数。

18. 为了让用户有原生体验，应禁止iOS和android用户选中文字（.class{-webkit-user-select:none;}）

1. js事件不同：click事件在移动端反应有300ms延迟，点击反应慢还会出现点透的bug。应尝试使用touch事件，或者使用fastclick.js库，也可以使用zeptojs中的tap事件。



2. 调试页面：使用chrome的模拟移动端工具，有时还要使用eruda、weinre真机调试工具。微信开发或者小程序请选择微信开发者工具。



3. 需要设置viewport：在header里使用

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
来控制屏幕全屏显示，且不能被缩放。



4. 字体规则：pc端使用的px在移动屏幕上不能很好的适应多分辨率，移动端改用rem字体单位。令 html{ font-size:62.5%; }，则1rem=10px。然后使用css3的媒体查询控制不同分辨率下html显示的倍数。

5. 最小点击区域44px：移动端是有最小点击识别区的，元素大小低于这个值时被点击是不会触发click事件的。

6. 可以调用硬件功能：可以通过设置a标签href类型来实现拨打电话、发送短信和邮件等功能。可以通过<input type="file">的accept 属性，调用本地图片或拍照。还可以使用html5的运动传感器数据事件实现微信摇一摇功能。

以上都是移动端和pc端的差异性，坑也提到了不少。如果想找学习资源，慕课网上有个《Hello，移动WEB》的教学视频，讲得挺好的。

记得的就这么多了，以后想到再回来写，希望对题主有用。斜眼笑 ：）


7. 忽略将页面中的数字识别为电话号码：

<meta name="format-detection" content="telephone=no" />


8. 屏幕旋转事件：window.orientation，取值：正负90表示横屏模式、0和180为竖屏模式

9. 虚拟键盘弹出导致 fixed 元素错位：虚拟键盘弹出（即onfucos事件触发）时将fixed改为static定位。

10. 可点击标签点击时有默认样式：a, button, input, optgroup, select, textarea 等标签点击时会出现一个 "暗色的"背景，可以使用以下代码去除

-webkit-tap-highlight-color: rgba(0,0,0,0);

11. 1px边框的实现：1. 背景图；2. translate 50%；3. gradient 渐变背景，50% 边框颜色，50% 透明；4. iOS 8开始，iOS 浏览器支持 0.5px 的 border（兼容性不好，只作参考）；

12. 安卓有些机型上设置字体line-height等于height时依然不能上下居中，是因为使用rem转换之后小于最小字号12px（可以先增大字号，然后translate缩回来）

13. 用css设置最多显示一行，多余显示省略号时第二行会出现一点字体头部（需要line-height:1.2；以上）

14. 不要在有 input 标签的页面使用 fixed 定位。在 iOS 上，当点击 input 标签获取焦点唤起软键盘的时候，fixed 定位会暂时失效（要保证 fixed 定位的节点的父节点不可滚动）

15. iphone动态生成html元素click失效。

16. transform: translate3d(x, y, z); 会开启硬件加速，解决页面闪白，保证动画流畅。

17. 由于IOS高清显示屏中的dpr比较高，像素点会由1个变为4个。所以保证长宽为偶数。

18. 为了让用户有原生体验，应禁止iOS和android用户选中文字（.class{-webkit-user-select:none;}）