聊一聊兼容移动端的那些的事情

[bosens-China]

最近在做移动端的项目，踩了许多坑，下面就是一些总结

2019 年 11 月 21 日

px 适配

关于适配网上有很多文章总结了，这里就不做概括了，简单来说如果为了兼容低版本一些的可以用 rem 布局，如果对兼容没有太多要求可以尝试一下vw、vh适配。

• rem
• 如何在 Vue 项目中使用 vw 实现移动端适配

1px

出现的问题跟设备像素比有关，设计稿一般为 750，那么 375 的屏幕 1px 就是 0.5px，安卓对 0.5px 的写法并不支持，解决的方法下面这篇文章概括很全面
移动端 1px 解决方案

click 点击延迟事件

一般而言这个问题只有比较老的浏览器才会出现，很不幸我就遇到了，出现的原因跟事件的执行有关，当你点击的时候浏览器需要判断后面会不会继续跟一个点击，如果是就执行双击缩放的功能，下面说一下常见的解决方法

• 移动端 300ms 点击延迟和点击穿透

浮层滚动

浮层弹出对话框之类的都是很常见的需求，我们一般而言会用fixed来实现，不过在移动端上依然是可以滚动的，下面就分享一种方法

var bodyEl = document.body;
var top = 0;

function stopBodyScroll(isFixed) {
  if (isFixed) {
    top = window.scrollY;
    bodyEl.style.position = "fixed";
    bodyEl.style.top = -top + "px";
  } else {
    bodyEl.style.position = "";
    bodyEl.style.top = "";
    // 回到原先的top
    window.scrollTo(0, top);
  }
}

其他文章推荐

• 【前端词典】滚动穿透问题的解决方案

ios 底部安全区

出现原因是因为 ios 取消了物理按键改用虚拟按钮

• H5 页面适配 iPhone X，就是那么简单

安卓 fixed 定位输入框输入出现错位

不要脸推荐一下自己之前写的文章，这个是安卓上才有，ios 不存在，建议的话就是不要使用fixed定位改用absolute;

• 键盘顶起引发的血案

position:fixed/absolute 随屏幕滚动

可以在fixed/absolute样式内添加

overflow-y: auto;
-webkit-transform: translateZ(0);

ios 点击失效

简单一些可以直接在点击的元素上设置

cursor: pointer;

• iOS 下的点击事件失效解决方法

前进后退事件(暂时没找到实现方法)

最近在有一个需求就是从 A 文件 跳转到 B 文件，在 B 执行了一些请求之类的操作，但是 A 也要刷新，当然是不同的页面不是 SAP 的单页面，当时想了一下直接通过监听popstate事件不就可以获取么

<!-- 缩减代码 -->
<a href="help.html">子页面</a>
<script>
  window.onpopstate = function(event) {
    // 执行一些操作
  };
</script>

不过很遗憾这种方法是不行的，因为popstate事件针对的是 history对象发生变化时，另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发，类似的还有popstate也不会触发，暂时没找到解决方法，如果有找到解决方法的小伙伴分享一下下。

最后

如果为内联样式动态辅助的时候注意兼容性的写法，常见的浏览器前缀如下

["Moz", "Webkit", "O", "ms", "Khtml"];

推荐一篇文章，觉得写得十分不错
前端认知：PPI、DPI、设备像素等概念