談一談移動端1px的問題

qianfeng 發布于2019-08-30 15:53 / 1120人閱讀

摘要：今天想寫的問題來自于網易一面的時候，面試官問我如何在移動端的頁面上畫一條的線。上面的結論我在端谷歌瀏覽器的設備模擬器里證實了有效，但是安卓和真機并沒有試過。

起因

最近一個月都在準備校招，所以沒什么時間寫博客。今天想寫的問題來自于網易一面的時候，面試官問我如何在移動端的頁面上畫一條1px的線。這個問題我模糊地記得之前看過相關文章，但是我清楚地記得當時自己腦子一片空白。是的，一面掛了，但是這個問題一直在我回來的路上不斷想起，所以今天我就要解決這個問題，來看看有什么解決方案吧～

動態改變viewport的縮放

這是淘寶的flexible提出的解決方案，其核心就是根據window.devicePixelRatio（dpr）的值動態改變viewport的縮放，核心代碼如下（有刪減）：

if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下，對于2和3的屏，用2倍的方案，其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他設備下，仍舊使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}

if (!metaEl) {
    metaEl = doc.createElement("meta");
    metaEl.setAttribute("name", "viewport");
    metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(metaEl);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(metaEl);
        doc.write(wrap.innerHTML);
    }
}

這個方案只對iOS的Retina屏幕做了處理，而沒有管安卓的Retina屏幕，原因可以看《再談Retina下1px的解決方案》這篇文章。使用了flexible之后直接寫1px就能實現效果，但是最新的2.0好像放棄了這種縮放的方案，對于1px的處理則變成了border-image或者background-image，詳細的可以看《再聊移動端頁面的適配》。

這里再簡單談一下這種viewport縮放的原理：

首先一開始寫移動端的時候，我是直接加一個meta標簽，這個meta標簽使得頁面寬度等于設備寬度，頁面的縮放默認為1，且用戶不能縮放，后來看到一篇文章講viewport計算是這樣的：

viewport的默認寬度是980px；設置了initial-scale則寬度是device-width/initial-scale；設置了width則寬度等于width的值；同時設置了initial-scale和width則寬度取兩者中較大的一個。

上面的結論我在PC端谷歌瀏覽器的設備模擬器里證實了有效，但是安卓和iOS真機并沒有試過。

transform: scale(0.5)

這個方案也是WeUI正在用的，核心思想是使用transform的scale來整體縮放，如果你想畫一條1px的線，就可以直接用

div {
    height: 1px;
      background: #000;
      transform: scaleY(0.5);
      transform-origin: 0 0;
}

理論上在dpr為2時就是scaleY(0.5)，在dpr為3時就是scaleY(0.333)，但是我注意到WeUI并沒有針對其他dpr的做特殊處理，可能是因為在iPhone6（dpr=2）和iPhone6 Plus（dpr=3）中看起來差別不大吧。

如果你想給一個元素加一個1px的邊框可以利用到偽元素，在這個方案下邊框加圓角也很容易實現，具體代碼如下：

div:after {
  content: " ";
  width: 78px;
  height: 38px;
  border-radius: 4px;
  border: 1px solid #000;
  transform: scale(0.5, 0.5);
  transform-origin: 0 0;
  position: absolute;
}

其他方案 border-image

這種是AlloyTeam的《CSS 實現類似原生效果的 1px 邊框》這篇文章上看到的，代碼寫起來挺簡單，但是要自己制作圖片，而且圓角也不好弄，如果改了顏色就要對圖片處理，所以不是很好的方案。

box-shadow

這個顏色不好弄，所以效果也不是很好。

div {
  border: none;
  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}

0.5px解決方案

div {
    border: 1px solid #000;
}

@media (-webkit-min-device-pixel-ratio: 2) {
  div {
    border: .5px solid #000;
  }
}

安卓和iOS7之前版本碰到0.5px直接就解析成0px了，但是這一特性也是可以利用的，在最新的flexible中就有對0.5px進行判斷的代碼：

// detect 0.5px supports
if (dpr >= 2) {
  var fakeBody = document.createElement("body")
  var testElement = document.createElement("div")
  testElement.style.border = ".5px solid transparent"
  fakeBody.appendChild(testElement)
  docEl.appendChild(fakeBody)
  if (testElement.offsetHeight === 1) {
    docEl.classList.add("hairlines")
  }
  docEl.removeChild(fakeBody)
}

小結

這篇文章從國慶開始斷斷續續地寫，到最后一天總算是寫完了，這段時間整個人心態經歷了一些變化，主要表現在對待技術比以前更加踏實了，無論如何希望自己能堅持寫博客，堅持學習前端，相信總能找到一個理想的工作的，加油！

GPU云服務器云服務器兼容支持webrtc的移動端移動端對webRTC的支持情況移動端移動安全問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116655.html

來，讓我們談一談Normalize.css

摘要：相比于傳統的，是一種現代的為準備的優質替代方案。保護了有價值的默認值通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。當一個元素在不同的瀏覽器中有不同的默認值時，會力求讓這些樣式保持一致并盡可能與現代標準相符合。本文譯自 http://nicolasgallagher.com/about-normalize-css/ 最初發布于我的博客：http://jerr...

_Zhao 2019-08-28 18:00 評論0 收藏0
2017-10-09 前端日報

摘要：前端日報精選傳送門瀏覽器性能優化渲染性能在生產中的使用發送推送第期巧用匿名函數重構你的代碼中文可持久化數據結構以及結構分享眾成翻譯學習筆記的模板學習筆記教程的作用域插槽教程移動助手實踐一基于的換膚功能掘金網站壓力及性能測試一篇 2017-10-09 前端日報精選傳送門：React Portal瀏覽器性能優化-渲染性能在生產中的Progressive Web App使用Service...

WilsonLiu95 2019-08-21 16:55 評論0 收藏0
談一談JVM垃圾回收

摘要：這個算法看似不錯而且簡單，不過存在這一個致命傷當兩個對象互相引用的時候，就永遠不會被回收于是引用計數算法就永遠回收不了這兩個對象，下面介紹另一種算法。前言 ? 如果要問Java與其他編程語言最大的不同是什么，我第一個想到的一定就是Java所運行的JVM所自帶的自動垃圾回收機制，以下是我學習JVM垃圾回收機制整理的筆記，希望能對讀者有一些幫助。哪些內存需要回收？what？ ? ...

stormzhang 2019-08-15 17:45 評論0 收藏0
談一談javascript異步

摘要：從今天開始研究一下的異步相關內容，感興趣的請關注同期異步系列文章推薦異步中的回調異步與異步之異步之異步之和異步之一異步之二異步實戰異步總結歸檔什么是異步我們知道的單線程的，這與它的用途有關。從今天開始研究一下javascript的異步相關內容，感興趣的請關注同期異步系列文章推薦javascript異步中的回調javascript異步與promisejavascript異步之Prom...

Sourcelink 2019-08-23 14:37 評論0 收藏0
談一談瀏覽器兼容問題

摘要：瀏覽器兼容問題什么是瀏覽器兼容所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。瀏覽器兼容問題 1、什么是瀏覽器兼容所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。 2、瀏覽器兼容產生的原因因為不同瀏覽器使用內核及所支持的HTML等網頁語言標準不同；以及用戶客戶端的環境不同（如...

wangzy2019 2019-08-20 19:06 評論0 收藏0