Mehrere Möglichkeiten zur Lösung des 1-Pixel-Randproblems auf Mobilgeräten (5 Methoden)

Dieser Artikel stellt 5 Möglichkeiten zur Lösung des 1-Pixel-Randproblems auf Mobilgeräten vor. Natürlich haben wir vorher zunächst das Wissen zu diesen Methoden geklärt: physische Pixel, geräteunabhängige Pixel, Gerätepixelverhältnis und Ansichtsfenster.

Physische Pixel, geräteunabhängige Pixel und Gerätepixelverhältnis

In CSS verwenden wir im Allgemeinen px als Einheit. Es ist zu beachten, dass px im CSS-Stil nicht dem physischen Pixel entspricht. Das Pixel in CSS ist nur eine abstrakte Einheit. Das physische Pixel, das in CSS durch 1px dargestellt wird, ist auf verschiedenen Geräten oder in verschiedenen Umgebungen unterschiedlich. Auf der PC-Seite entspricht 1px CSS im Allgemeinen 1 physischen Pixel auf dem Computerbildschirm, auf der mobilen Seite ist 1px CSS jedoch gleich mehreren physischen Pixeln.

Physisches Pixel

Physische Pixel werden auch Gerätepixel oder Device Physical Pixel genannt. Sie sind die kleinsten physischen Anzeigeeinheiten von Displays (Computer- und Handy-Bildschirmen). Jedes physische Pixel besteht aus einem Farbwert und einem Helligkeitswert. Die sogenannten 1x-Bildschirme, 2x-Bildschirme (Retina) und 3x-Bildschirme beziehen sich darauf, wie viele physische Pixel das Gerät verwendet, um ein CSS-Pixel anzuzeigen. Das heißt, der Multi-Screen verwendet mehr und feinere physische Pixel, um ein CSS-Pixel anzuzeigen. Auf einem normalen Bildschirm entspricht 1 CSS-Pixel 1 physischem Pixel, während auf einem Retina-Bildschirm 1 CSS-Pixel 4 physischen Pixeln entspricht (zum Verständnis siehe das Felddiagramm unten).

Geräteunabhängiges Pixel

Geräteunabhängige Pixel, auch als CSS-Pixel bekannt, sind die Pixel, die wir beim Schreiben von CSS verwenden. Es handelt sich um eine abstrakte Einheit, die hauptsächlich in Browsern verwendet wird, um den Inhalt von Webseiten genau zu messen.

Gerätepixelverhältnis

Das Gerätepixelverhältnis wird als DPR abgekürzt und definiert die Entsprechung zwischen physischen Pixeln und geräteunabhängigen Pixeln: Gerätepixelverhältnis = physische Pixel / geräteunabhängige Pixel.

1px entspricht in CSS mehreren physischen Pixeln. Es hängt nicht nur mit der Bildschirmpixeldichte dpr zusammen, sondern auch mit dem Benutzerzoom. Wenn der Benutzer beispielsweise eine Seite um die Hälfte vergrößert, verdoppelt sich auch der in CSS durch 1px dargestellte physische Pixel. Umgekehrt wird sich auch der in CSS durch 1px dargestellte physische Pixel halbieren, wenn der Benutzer eine Seite um die Hälfte verkleinert. Dies wird weiter unten im Artikel im Abschnitt zum Problem der 1px dünnen Linie erläutert.

1px dünne Linie Problem

Wie wir oben wissen, ist das CSS-Pixel eine 1px breite gerade Linie, und das entsprechende physische Pixel ist anders und kann 2px oder 3px groß sein. Die 1px breite gerade Linie, die der Designer möchte, ist tatsächlich 1 physisches Pixel breit.

Für CSS kann es als „border: 0,5px;“ betrachtet werden, was die kleinste Einheit ist, die auf mehreren Bildschirmen angezeigt werden kann. Allerdings können nicht alle mobilen Browser „border: 0.5px“ erkennen. In manchen Systemen werden 0.5px als 0px behandelt. Was ist also mit dem Problem der 1px dünnen Linie?

Verwenden von Rahmenbildern

Wählen Sie das gewünschte Bild aus und legen Sie es dann entsprechend der CSS-Eigenschaft „Border-Image“ fest. Der Code lautet wie folgt:

div
{
 -moz-border-image:url(/i/border.png) 30 30 stretch; /* Alter Firefox */
 -webkit-border-image:url(border.png) 30 30 strecken; /* Safari 5 */
 -o-border-image:url(border.png) 30 30 strecken; /* Opera */
 Rahmenbild: URL (Rahmen.png) 30 30 strecken;
}

Vorteile: Sie können einzelne oder mehrere Tabellenrahmen einstellen. Nachteile: Farbe und Stil lassen sich nur schwer ändern und auf manchen Geräten kann es zu Unschärfe kommen.

Hintergrundbild verwenden

Die Methode für das Hintergrundbild ist dieselbe wie für das Rahmenbild. Sie müssen zunächst ein Bild vorbereiten, das Ihren Anforderungen entspricht. Die Vor- und Nachteile sind die gleichen wie bei Border-Image.

 .Hintergrundbild-1px {
 Hintergrund: URL(../img/line.png) repeat-x links unten;
 -webkit-Hintergrundgröße: 100 % 1px; Hintergrundgröße: 100 % 1px;
}

Verwenden Sie Box-Shadow, um Grenzen zu simulieren

 .box-shadow-1px {
   Box-Schatten: Einschub 0px -1px 1px -1px #c8c7cc;
 }

Vorteile: weniger Code und gute Kompatibilität. Nachteile: Der Rand ist schattiert und die Farbe ist heller.

Die oben genannten drei Methoden sind nicht sehr effektiv.

Pseudoelement + Transformation

Erstellen Sie ein Pseudoelement mit einem Rand von 1 Pixel und skalieren Sie es dann mithilfe der Transformation auf 50 %.

/* Der Designentwurf hat die Größe 750 bei einem Verhältnis von 1:100 und die Schriftgröße beträgt 100*(100vw/750) */
.border-1px {
    Position: relativ;
}
@media screen und (-webkit-min-device-pixel-ratio: 2) {
    .border-1px:vor {
        Inhalt: " ";
        Position: absolut;
        links: 0;
        oben: 0;
        Breite: 100 %;
        Höhe: 1px;
        Rahmen oben: 1px durchgezogen #D9D9D9;
        Farbe: #D9D9D9;
        -webkit-transform-origin: 0 0;
        Transform-Ursprung: 0 0;
        -webkit-transform: MaßstabY(0,5);
        transformieren: scaleY(0,5);
    }
}

Vorteile: Es kann allen Szenarien gerecht werden und ist flexibel anpassbar. Nachteil: Elemente die Pseudoklassen verwenden müssen mehrfach verschachtelt werden.

Berechnen Sie den Rem-Basiswert und den Ansichtsfenster-Zoomwert mit JS

/* Der Designentwurf hat die Größe 750, verwendet ein Verhältnis von 1:100 und die Schriftgröße beträgt 100 * (docEl.clientWidth * dpr / 750) */
var dpr, rem, Skala;
var docEl = Dokument.Dokumentelement;
var fontEl = document.createElement('Stil');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = Fenster.GerätePixelVerhältnis || 1;
rem = 100 * (docEl.clientWidth * dpr / 750);
Maßstab = 1 / dpr;
// Ansichtsfenster festlegen und skalieren, um einen hochauflösenden Effekt zu erzielen metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// Legen Sie das data-dpr-Attribut für CSS-Hacking fest, um das Problem unscharfer Bilder und 1 Pixel dünner Linien zu lösen. docEl.setAttribute('data-dpr', dpr);
// Stil dynamisch schreiben docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{Schriftgröße:' + rem + 'px!important;}';

Verwenden Sie JS, um den Rem-Basislinienwert und den Anfangsskalierungswert für verschiedene Bildschirme entsprechend der Bildschirmgröße und des DPR genau einzustellen. Diese JS-Lösung hat das Problem der 1px dünnen Linie perfekt gelöst.

Damit ist dieser Artikel über mehrere Methoden (5 Methoden) zur Lösung des 1px-Randproblems auf mobilen Endgeräten abgeschlossen. Weitere relevante Inhalte zu 1px-Randproblemen auf mobilen Endgeräten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!