So implementieren Sie die Größenanpassung mobiler Webseiten

Ich habe das vorliegende Projekt endlich abgeschlossen und die vermissten Personen sind zurück! Während der Durchführung des Projekts sind mir viele bedenkenswerte Punkte aufgefallen, die ich kurz erläutern werde. Das erste aufgetretene Problem ist die Anpassung der Webseitengröße.

Die am häufigsten verwendeten Methoden sind:

• Erstens sollte die Seitengröße den Bildschirm ausfüllen, ohne überzulaufen. Fügen Sie einfach das Ansichtsfenster in das HTML-Tag <head> ein (wie unten gezeigt). Die Parameter stellen dar: Seitenbreite = Bildschirmbreite, die maximalen und minimalen Skalierungsverhältnisse sind beide 1, und Benutzer dürfen nicht hinein- oder herauszoomen.

XML/HTML-CodeInhalt in die Zwischenablage kopieren

< Meta Name = "Ansichtsfenster" Inhalt = "Breite=Gerätebreite, maximaler Maßstab=1,0, minimaler Maßstab=1,0, benutzerdefiniert skalierbar=nein" >

• Prozentuale Anpassung: Wandeln Sie die Längeneinheit in eine Prozentangabe um, sodass sich bei unterschiedlichen Breiten die Länge und Breite des Elements ändert.

Vorteile: Nahtlose Verbindung zwischen den Breiten und relativ komfortable Bedienung.

Nachteile: Die Schriftgröße erfordert zur Anpassung einen weiteren Satz adaptiver Methoden, ab einer Bildschirmbreite von 700px werden die Elemente bei einer weiteren prozentualen Anpassung zu groß, was die Anpassung erschwert.

•Rem und em adaptiv: Verwenden Sie die Media-Query-Methode, um die Schriftgröße von <html> oder <body> bei unterschiedlichen Bildschirmbreiten zu bestimmen. Verwenden Sie dann rem und em anstelle von px als Einheiten, um Adaptivität zu erreichen.

Vorteile: Es kann entsprechend unterschiedlicher Bildschirmbreiten eingestellt werden, wodurch das oben erwähnte Proportionsproblem bei zu großem Bildschirm perfekt gelöst werden kann. Auch die Schriftgröße stellt kein Problem dar.

Nachteile: Es wird entsprechend dem Breitenbereich eingestellt und kann keine nahtlose Transformation erreichen.

--------------------------------------------------------------------------------

Diese Kompatibilitätsmethoden haben jeweils ihre eigenen Vor- und Nachteile, und keine davon ist perfekt. Wie können wir die Vorteile kombinieren und gleichzeitig die Nachteile vermeiden?

Als ich mich auf die adaptive Methode von Taobao bezog, entdeckte ich zufällig, dass die Schriftgröße der Seite <html> automatisch entsprechend der Bildschirmbreite angepasst wird und der Quotient aus Bildschirmbreite und eingestellter Schriftgröße bestimmt wird.

Ich vermute also, dass JS zum Ermitteln der Bildschirmbreite verwendet wird, diese in einem festen Verhältnis verkleinert wird und diese als Einheitslänge von Rem zur Anpassung verwendet wird.

Ist das nicht eine Lösung mit allen Vorteilen? ? Erlauben Sie mir bitte, kurz aufgeregt zu sein (☆_☆)

--------------------------------------------------------------------------------

Der JS-Code ist sehr einfach zu schreiben und löst perfekt das Problem, dass mit REM-Einstellungen keine nahtlose Verbindung hergestellt werden kann.

Nach dem Testen auf der mobilen Seite traten jedoch Probleme auf. Safari auf der mobilen Seite führte das JS blitzschnell aus, bevor das HTML geladen wurde. Bevor die Seite die Breite entsprechend dem Ansichtsfenster eingestellt hatte, las JS die falsche Breite, wodurch das Element doppelt so groß wurde wie zuvor 0^0. Um das Problem zu lösen, war setTimeout() erforderlich.

--------------------------------------------------------------------------------

Endgültiger Code

JavaScript CodeInhalt in die Zwischenablage kopieren

Zepto( Funktion ($){
var win = Fenster,
doc = Dokument;
Funktion setzeSchriftgröße() {
var winWidth = $(window).width();
// Begrenzen Sie die Breite über 640
var Größe = (Fensterbreite / 640) * 100;
doc.documentElement.style.fontSize = (Größe < 100? Größe: 100) + 'px' ;
};
//Ausführung verhindern, wenn HTML nicht vollständig geladen ist, um die richtige Seitenbreite sicherzustellen
setTimeout( Funktion () {
// Initialisierung
setFontSize();
}, 200);
});

Abschließend möchte ich noch auf eine Falle hinweisen, die ich bei der Verwendung von rem zur Anpassung entdeckt habe: Wenn das HTML eine größere Schriftgröße festlegt, haben die Ränder und Abstände der Inline-Elemente innerhalb des Blockelements zusätzliche Werte. Die Lösung besteht darin, die Schriftgröße des äußeren Blockelements auf 0 zu setzen.

Die obige Methode zur Implementierung der adaptiven Größe mobiler Webseiten ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Original-URL: http://www.cnblogs.com/daisykoo/archive/2016/05/24/5522958.html

<<: Detaillierte Erläuterung des automatischen Formatierungszeilenumbruchs von Vue Save

>>: MySQL-Unterabfrage und Details zur Verknüpfungstabelle

Nodejs-Fehlerbehandlungsprozessaufzeichnung

Artikel empfehlen

Übersicht über MySQL-Statistiken

MySQL führt SQL durch den Prozess der SQL-Analyse...

So installieren Sie Oracle auf Windows Server 2016

1. Installieren Sie Oracle. Im Internet gibt es z...

Detaillierte Erläuterung mehrerer API-Beispiele, die häufig in der fortgeschrittenen JavaScript-Frontend-Entwicklung verwendet werden

Inhaltsverzeichnis MutationObserver API Merkmale ...

So implementieren Sie die Größenanpassung mobiler Webseiten

Nodejs-Fehlerbehandlungsprozessaufzeichnung

So beheben Sie den Fehler "ERROR 1045 (28000)" beim Anmelden bei MySQL

Vollständige Schritte für dynamische Bindungssymbole in Vue

Detaillierte Erläuterung zum Erstellen und Aufrufen von gespeicherten MySQL-Prozeduren

So stellen Sie nginx mit Docker bereit und ändern die Konfigurationsdatei

Sieben Prinzipien eines guten Designers (2): Farbgebrauch

Drei Möglichkeiten, um zu verhindern, dass MySQL doppelte Daten einfügt

Implementierung von Vergleichen, Sortieren und anderen Operationen für Daten vom Typ varchar in MySQL

Konfigurationsmethode für das Fenster der kostenlosen Installationsversion von MySQL 5.7.18

Beispiel zum Deaktivieren der Browser-Cache-Konfiguration im Vue-Projekt

Artikel empfehlen

Übersicht über MySQL-Statistiken

So installieren Sie Oracle auf Windows Server 2016

Detaillierte Erläuterung mehrerer API-Beispiele, die häufig in der fortgeschrittenen JavaScript-Frontend-Entwicklung verwendet werden

Detaillierte Anweisungen zur Installation von Jenkins auf Ubuntu 16.04

So legen Sie fest, dass der Text im Dropdown-Auswahlmenü nach links und rechts gescrollt wird

Aktivierungscode und KMS-Installationsschlüssel für Windows Server 2019 (Volume License Edition, GVLK)

Lösung zum automatischen Auslösen von Klickereignissen beim Klicken auf ein Popup-Fenster in Vue (Simulationsszenario)

VirtualBox installiert die virtuelle Maschine CentOS7 und Erweiterungstools (Bild und Text)

Erläuterung des Prozesses des Docker-Packaging-Node-Projekts

Detaillierter Prozess zum Erstellen von mysql5.7.29 unter Centos7 von Linux

JavaScript zum dynamischen Laden und Löschen von Tabellen

Gewöhnliche Gespräche über die Verwendung von MYSQL Pattern Matching REGEXP und ähnliches

Drei Möglichkeiten zum Parsen von QR-Codes mit Javascript

Das einfachste Tutorial zur Sicherung und Wiederherstellung von MySQL-Daten aller Zeiten (Teil 2) (Teil 36)

Installations-Tutorial zur komprimierten Version von MySQL 8.0.11 unter Win10