移動端Retina屏邊框線1px 顯示爲2px或3px問題解決方法

時間 2019-11-26

標籤移動 retina 邊框 1px 顯示 2px 3px 問題解決方法欄目無線简体版

原文原文鏈接

咱們在開發移動端web項目時常常遇到設置border:1px，可是顯示的邊框卻爲2px或是3px粗細，這是由於設備像素比devicePixelRatio爲2或3引發的。

一、何爲「設備像素比devicePixelRatio」

設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。

公式表示就是：window.devicePixelRatio = 物理像素 / dips dip或dp,（device independent pixels，設備獨立像素）與屏幕密度有關。dip能夠用來輔助區分視網膜設備仍是非視網膜設備。

全部非視網膜屏幕的iphone在垂直的時候，寬度爲320物理像素。當你使用<meta name="viewport" content="width=device-width">的時候，會設置視窗佈局寬度（不一樣於視覺區域寬度，不放大顯示狀況下，二者大小一致，見下圖）爲320px, 因而，頁面很天然地覆蓋在屏幕上。這樣，非視網膜屏幕的iphone上，屏幕物理像素320像素，獨立像素也是320像素，所以，window.devicePixelRatio等於1.javascript

而對於視網膜屏幕的iphone，如iphone4s, 縱向顯示的時候，屏幕物理像素640像素。一樣，當用戶設置 <meta name="viewport" content="width=device-width">的時候，其視區寬度並非640像素，而是320像素，這是爲了有更好的閱讀體驗 – 更合適的文字大小。
這樣，在視網膜屏幕的iphone上，屏幕物理像素640像素，獨立像素仍是320像素，所以， window.devicePixelRatio等於 2.

每一個像素點實際上有4倍的普通像素點，以下示意(© smashingmagazine)：html

1個CSS像素點實際上有4個位圖像素點，1個分紅4個，顯然不夠分啊，只能顏色近似選取，因而，圖片感受就是模糊的(© smashingmagazine)！。這就是爲何使用兩倍圖。java

視網膜屏幕下圖片就顯示OK了（非視網膜屏幕圖片被壓縮-減小像素取樣——資源浪費！）

二、各「設備像素比」對應的設備

-webkit-min-device-pixel-ratio爲1.0

全部非Retina的Mac
全部非Retina的iOS設備
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S

-webkit-min-device-pixel-ratio爲1.3

Google Nexus 7

-webkit-min-device-pixel-ratio爲1.5

Google Nexus S
Samsung Galaxy S II
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation

-webkit-min-device-pixel-ratio爲2.0

iPhone 4
iPhone 4S
iPhone 5
iPad (3rd generation)
iPad 4
全部Retina displays 的MAC
Google Galaxy Nexus
Google Nexus 4
Google Nexus 10
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
HTC One X

-webkit-min-device-pixel-ratio爲3.0web

iPhone 6 plus
iPhone 6s plus

三、javascript獲取「設備像素比」

document.getElementById("button").onclick = function() {
alert(window.devicePixelRatio);
};

四、Demo實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移動設備的1px邊框(默認1px的線太粗，用背景模擬)</title>
    <style>
        .bordercase,.borderbottom,.borderright{
            border: 1px solid #000;
        }
        h1{font-size: 15px;}
        a.bt{display: inline-block;height:30px; red;color: #fff;}
 
        .borderbottom{#fff;font-size: 15px;}
        @media (-webkit-min-device-pixel-ratio: 2){
        .borderbottom {
 
        border: none;
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,transparent),color-stop(50%,#000000),color-stop(100%,#000000));
        background-image: -webkit-linear-gradient(top,transparent 50%,#000000 50%,#000000 100%);
        background-image: linear-gradient(to bottom,transparent 50%,#000000 50%,#000000 100%);
        background-size: 100% 1px;
        background-repeat: no-repeat;
        background-position: bottom;
 
        }
 
        @media (-webkit-min-device-pixel-ratio: 2){
        .borderright {
 
        border: none;
        background-image: -webkit-gradient(linear,left top,right top,color-stop(50%,transparent),color-stop(50%,#000000),color-stop(100%,#000000));
        background-image: -webkit-linear-gradient(left,transparent 50%,#000000 50%,#000000 100%);
        background-image: linear-gradient(to right,transparent 50%,#000000 50%,#000000 100%);
        background-size: 1px 100%;
        background-repeat: no-repeat;
        background-position: right;
 
        }
 
        @media (-webkit-min-device-pixel-ratio: 3){
        .borderbottom {
 
        border: none;
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(65%,transparent),color-stop(65%,#000000),color-stop(100%,#000000));
        background-image: -webkit-linear-gradient(top,transparent 65%,#000000 65%,#000000 100%);
        background-image: linear-gradient(to bottom,transparent 65%,#000000 65%,#000000 100%);
        background-size: 100% 1px;
        background-repeat: no-repeat;
        background-position: bottom;
 
        }
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <h1>問題：border:1px，在手機設備上是2px或是3px，Why？？？
            </h1>
            <div class="bordercase">爲何個人邊框那麼大？ 說好的1像素呢？？？  瞬間各類不愛了。。。。。。
            .bordercase{border: 1px solid #000;}</div>
        </li>
        <li><h1>一、何爲「設備像素比devicePixelRatio」</h1>
            <p>設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips   dip或dp,（device independent pixels，設備獨立像素）與屏幕密度有關。dip能夠用來輔助區分視網膜設備仍是非視網膜設備。</p>
        </li>
        <li>
            <h1>二、「Retina」屏呈像原理</h1>
            <img src="page1.png" height="284" width="500" />
            <img src="page2.png" height="168" width="500"/>
        </li>
        <li><h1>三、獲取設備的devicePixelRatio(開啓Chrome瀏覽器能夠看到各類類型設備的像素比)</h1>
                    <a class="bt" id="bt" onclick="alert(window.devicePixelRatio);">點擊我查看設備的devicePixelRatio</a>
 
        </li><li><h1>四、解決方法(經過背景模擬邊框線，把1px一分爲二)</h1>
            <a class="bt" href='https://jsfiddle.net/starrycheng/6ndbw6ax/1/'" target="_blank">jsfiddle地址</a>
 
            <div class="borderbottom">看我下邊框(在手機上才能看到我，在模擬器裏有時候是看不到的。)</div>
              <br/>
              <br/>
              <br/>
            <div class="borderright">看我右邊框(在手機上才能看到我，在模擬器裏有時候是看不到的。)</div>
            <br/>
            <br/>
            <br/>
            <br/>
            <div>
            <br/>
            個人代碼樣式代碼  <br/> 
            @media (-webkit-min-device-pixel-ratio: 2){
            <br/>
            .borderbottom {
 
        border: none;（定義元素無邊框）
        <br/>
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,transparent),color-stop(50%,#000000),color-stop(100%,#000000));（//-webkit老式語法書寫規則：線性漸變，從中間到下，顏色逐漸加深。50%從中間開始。從透明效果開始。）
        <br/>
        background-image: -webkit-linear-gradient(top,transparent 50%,#000000 50%,#000000 100%);(//-webkit最新發布書寫語法：線性漸變，從中間到下，顏色逐漸加深。50%從中間開始。從透明效果開始。)
        <br/>
        background-image: linear-gradient(to bottom,transparent 50%,#000000 50%,#000000 100%);（//HTML5標準寫法：線性漸變，從中間到下，顏色逐漸加深。50%從中間開始。從透明效果開始。）
        <br/>
        background-size: 100% 1px;（背景大小1像素，100%的寬度）
        <br/>
        background-repeat: no-repeat;（不重複）
        <br/>
        background-position: bottom;（背景出現位置）
 
        }}</div>
        </li>
    </ul>
</body>
</html>