為什么Android邊框上的CSS邊框看起來有所不同？

Question

我有一個帶邊框的盒子。

border: 1px solid #000;

我正在使用以下視口設置：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

邊框似乎是頂部和右側的2個像素。 這是什么原因？

附加：除了寬度和高度之外，沒有其他CSS規則。

Answer 1

專門針對像素密度的元標記已被折舊，現在Android和iPhone似乎只使用了一個元標記：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

但是，如果您嘗試制作1px邊框，則根據移動設備的像素密度，它會在不同側面變得更厚更薄。

一些設備如何使用多個像素渲染“1px”並且它並不總是很漂亮，因為它們使用不同的像素比率（dpr），例如1.5,2和3.有時，1px邊框的所有4個邊都不匹配。

這是一些CSS，通過將1px除以一半，在2dpr iPhone上正確顯示1px：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

div {

border-width: 0.5px;

}

此處顯示了類似的技術： http ： //n12v.com/css-retina-and-physical-pixels/ https://developer.android.com/guide/webapps/targeting.html

Answer 2

除非你有充分的理由（可疑），禁用用戶縮放是一個非常糟糕的主意。 請參閱user-scalable = no ... Evil或Slightly Not Evil？ 舉例說明為什么這是壞事。 它還給出了一些user-scalable=no完全可以接受的示例。

對於1.5像素比，請嘗試

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  div {
    border-width: 0.75px;
  }
}

Answer 3

“你可以修改你的答案，讓它適用於所有設備，不管DPI嗎？會非常有用！ - Basj”

我不知道這有多大幫助我在這里添加了一個自定義函數來獲得幾乎所有dpr的邊框大小

 <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Pixel Ratio</title>
    <style>
    .bord {
        width: 300px;
        height: 300px;
        border: 10px solid #000;
    }
    </style>
    </head>

    <body>
    <div class="bord"> </div>
    <script>

    dprof("bord"); 
    function dprof(elmclass){
        var z =document.getElementsByClassName(elmclass).length;
        var dpr = window.devicePixelRatio;
        for(i=0;i<z;i++){
            document.getElementsByClassName(elmclass).item(i).classList.add("dpr-"+dpr);
            var bw =getComputedStyle(document.getElementsByClassName(elmclass).item(i),null).getPropertyValue('border-width');   
            var nw =bw.replace("px","");


            var nbw=nw/dpr;
            console.log(nbw);
            if(nbw!=0){
                document.getElementsByClassName(elmclass).item(i).style.borderWidth=nbw+"px";
            }

        }



    }

    </script>
    </body>
    </html>

為什么Android邊框上的CSS邊框看起來有所不同？

問題描述

3 個解決方案

解決方案1
13 2018-03-14 06:38:19

解決方案2
0 2018-03-19 17:37:35

解決方案3
0 2018-03-20 10:58:01

為什么Android邊框上的CSS邊框看起來有所不同？

問題描述

3 個解決方案

解決方案1 13 2018-03-14 06:38:19

解決方案2 0 2018-03-19 17:37:35

解決方案3 0 2018-03-20 10:58:01

解決方案1
13 2018-03-14 06:38:19

解決方案2
0 2018-03-19 17:37:35

解決方案3
0 2018-03-20 10:58:01