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

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

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、设备像素等概念