bordi a doppia larghezza su dispositivi Android con un rapporto pixel CSS di 1,5

Data una simple page (fonte sotto) che contiene un elemento con un bordo 1px, renderà simili su Android rispetto a IOS:bordi a doppia larghezza su dispositivi Android con un rapporto pixel CSS di 1,5

http://f.cl.ly/items/0h2Y0v0u1v1L120m0X0s/Untitled-2.png

Come si può vedere, il bordo Android non ha una larghezza uniforme, a volte è 1px e talvolta è largo 2px. Per quanto ho potuto testarlo, questo si verifica solo su dispositivi con un rapporto pixel CSS di 1,5 (incluso l'emulatore Android), ma non con un rapporto pixel di 2 (incluso iOS). Credo che questo problema sia causato da subpixel-antialias e/o problemi di arrotondamento, ma onestamente non ho idea di come risolverei questo problema.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=utf-8 /> 
    <title></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <style type="text/css"> 
      div { 
        width: 100px; 
        text-align: center; 
        margin-left: 50%; 
        border: 1px solid magenta; 
      } 
    </style> 
</head> 
<body> 
     <div>Foobar</div> 
</body> 
</html>

fonte

2013-08-09 fresskoma

sto affrontando anche la questione nel browser di Android. C'è qualche idea per risolvere questo problema? – Karthick

Per i dispositivi a bassa DPI ho trovato la prossima soluzione:

.wrapper { 
 
    background-color: red; 
 
    padding: 1px; 
 
    display: inline-block; 
 
} 
 
.inner_text { 
 
    padding: 5px; 
 
    background-color: #fff; 
 
    display: inline-block; 
 
}

<div class="wrapper"> 
 
    <span class="inner_text">Showing perfect one-sized border on low DPI devices</span> 
 
</div>

esattamente per dispositivi a basso DPI devono utilizzare media query per le eccezioni. Ad esempio @media (max risoluzione: 190dpi) o di un'altra condizione

E sembra po 'diverso da 1px confine, ma così vicino e non ostacolato con larghezze

fonte

2015-08-18 09:26:30 DrZumbel

bordi a doppia larghezza su dispositivi Android con un rapporto pixel CSS di 1,5

risposta

Problemi correlati