关联：

我参与过许多移动项目。在开发和调试过程中，一个好的调试工具会大大提高效率。博主之前已经推荐过一款神器：

接下来我们总结一下移动端遇到的坑。

1. 问题

在模拟移动端【左图】调试时，显示很正常，但是在真实设备【右图】上，里面的内容明显偏高，非常不美观。

在国外网站上，该属性的兼容性是不设计line-或设置line-。

我试了一下，虽然在模拟调试中稍微向上，但在“真机”上垂直居中~

2.线-

line-常用于文字居中，不同手机显示效果有所不同。什么鬼啊~

它在模拟器上完美显示，但是！和IOS又‘抵消’了。如果在行-上添加 1px，文本将稍微“正常”地显示。由于我们应用程序的大多数 iOS 用户拥有太多型号，不同型号的显示会有所不同，因此我们只能退而求其次。 line-的兼容性问题不好解决。容器的高度越小，显示效果的差异越明显。

解决方案：稍微大一点的高度，最好设置line-为高度+1px，这样在两个平台上的显示都不会太“奇怪”。

3.使用rem（兼容：ie9+）

原理：浏览器默认字体高度为16px，未调整的浏览器显示1em=16px。

rem只是相对于根元素的font-size，即只需要设置根元素的font-size，其他元素可以使用rem单位设置为相应的百分比；

一般用途：

将html的font-size设置为62.5%

html{

字体大小：62.5%；

身体{

字体大小：12px；

字体大小：1.2rem；

p{

字体大小：14px；

字体大小：1.4rem；

4. 实现原生控件的自定义样式

因为移动端原生的样式比较丑，所以原生的弹窗样式才符合我们的设计原则。

解决办法：将原图设置为透明，设置z-high，然后用更好看的样式在表面‘假装’

5.在移动端使用绘图

绘制一大段之后，您想要获取 HTML 的 ID 节点。事实上，你无法得到它。这个问题在动态创建DOM的时候经常会出现。

这也是工件的问题。博主自己写了一个手机轮播插件。在网上浏览很正常，但是在真机上使用时却显示空白。各种百度，终于发现了这么个坑……

解决方案：尝试了很多方法之后，我老老实实直接在页面上使用了HTML结构。如果有更好的方法请告诉我。

6. 延迟

选项 1：禁用缩放

当 HTML 文档标头包含以下元标记时：

缺点——需要完全禁用缩放才能达到消除点击延迟的目的。然而，完全禁用缩放并不是我们的初衷。我们只是想禁用默认的双击缩放行为，这样我们就不必等待确定当前操作是否是双击。

选项 2：更改默认视口宽度

如果设置了上述meta标签，浏览器就可以假设网站已经针对移动设备进行了适配和优化，无需双击缩放操作。

该方案相对于方案一的优点在于，它并没有完全禁用缩放，而只是禁用了浏览器默认的双击缩放行为，但用户仍然可以通过捏合缩放操作来缩放页面。

兼容性问题：

对于选项1和选项2，它是第一个支持的，紧随其后。不过麻烦的是，它除了双击缩放之外，还有双击滚动操作。如果采用这两个选项，双击滚动也将被禁用。 。

7.点击穿透

常见问题场景：假设页面上有两个元素A和B。 B 元素位于 A 元素之上。我们在 B 元素的事件上注册了一个回调函数。回调函数的作用是隐藏B元素。我们发现，当我们点击B元素时，B元素被隐藏了，然后A元素触发了事件。

这是因为在移动浏览器中，事件执行的顺序是>>。

活动有延迟。当事件隐藏B元素时，浏览器触发事件​​，但此时B元素消失，因此事件被分派到A元素。

如果A元素是链接，此时页面会意外跳转。

解决方案：

1.不要混合和

2.食用后

解决方案：

1. 只需将页面中的所有内容替换为事件（ 、 ''、 'tap'）。注意：a标签的href也需要替换为js跳转。

2. 最小的改变 - 稍后隐藏 B 元素

8. 虚拟键盘导致元素错位

元素肯定会与虚拟键盘一起出现，但虚拟键盘只是“附加”到它上面。表面上看，它不会对 DOM 产生“任何”影响，但此时，元素行为变得怪异且错位。

解决原理：虚拟键盘弹出时设置该元素，虚拟键盘消失时设置回来。

解决方案：由于出现了虚拟键盘并且没有抛出事件，所以检测或者事件会有一定的延迟，并且会出现闪烁。如果当前焦点元素是文本元素，则将该元素设置为 。

9. 移动手势

手指在屏幕上： 手指在屏幕上滑动： 手指离开屏幕：

原则：

1. 事件触发时，记录手指按下的时间以及本次滑动的初始位置。

2、事件触发时，记录当前位置（实时移动元素）、滑动距离（当前位置与初始位置的差值），判断正负数，然后决定向左还是向右移动。

3. 事件触发时，记录手指离开屏幕的时间，获取手指在屏幕上停留的时间（-），以及滑动的距离。

判断是否滑动：

如果停留时间小于10秒，则认为是快速滑动，无论滑动多远，都会转到下一页。

滑动距离与“容器”的大小进行比较。如果超过“容器”大小的 1/3，请转至下一页。

10.动态生成html元素失败

这也是一个神奇的坑。查了很久资料，也没有很合理的解释。

解决方案：给绑定元素添加css样式：；

专栏作者简介()

陈申丹：热爱前端，欢迎交流

提示支持作者写出更多好文章，谢谢！

- - - - - - - - - 推荐 - - - - - - - - -

饭品社推出了十几款极客T恤，主题涉及程序员、电影、美剧、物理等。单件59.9元，两件立减12元，四件立减28元。详情请参阅网上商店的产品页面。

网店地址：

淘宝密码：复制以下红色内容，然后打开淘宝购买

饭品社，先用￥极客T恤￥预览（长按复制整篇文案，手机打开淘宝进入活动内容）