Почему граница CSS отличается от Android?

У меня есть коробка с рамкой.

border: 1px solid #000;

Я использую следующую настройку видового экрана:

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

Граница, по-видимому, составляет 2 пикселя в верхней и правой частях. Что является причиной этого?

Дополнительно: нет других правил CSS, кроме ширины и высоты.

Ответ 1

Мета-тег, который специально предназначался для плотности пикселей, был обесценен, и теперь как Android, так и iPhone, похоже, просто используют один метатаг:

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

Но если вы попытаетесь сделать границу 1px, она будет толще и тоньше с разных сторон в зависимости от плотности пикселей мобильного устройства.

Как некоторые устройства отображают "1px" с несколькими пикселями, и это не всегда хорошо, потому что они используют разные соотношения пикселей (dpr), такие как 1.5, 2 и 3. Иногда все 4 стороны границы 1px не совпадают.

Это некоторый 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

Ответ 2

Если у вас нет очень веской причины (сомнительно), отключение пользовательского масштабирования - очень плохая идея. См. Масштабируемый пользователем = нет... зло или слегка не зло? примеры того, почему это плохо. Также приводятся примеры, в которых user-scalable=no вполне приемлемо.

для отношения 1,5 пикселя попробуйте

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

Ответ 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>