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

最近在作移動端的項目，踩了許多坑，下面就是一些總結

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、設備像素等概念