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

Verwenden von js zum Implementieren der bidirektionalen Bindungsfunktion von Daten in Vue2.0

So implementieren Sie die Größenanpassung mobiler Webseiten

Verwenden von js zum Implementieren der bidirektionalen Bindungsfunktion von Daten in Vue2.0

MySQL-unabhängiger Index und gemeinsame Indexauswahl

Detaillierte Erläuterung der Ausführungsreihenfolge der JavaScript-Alarmfunktion

Mehrere Implementierungsmethoden der Tab-Leiste (empfohlen)

Lösen Sie das Problem, dass await in forEach nicht funktioniert

So aktivieren Sie Fernzugriffsberechtigungen in MySQL

Funktionsüberladung in TypeScript

Teilen Sie 12 häufig verwendete Loader in Webpack (Zusammenfassung)

HTML-Tutorial: Horizontales Liniensegment in HTML

Verwenden von Textschatten- und Elementschatteneffekten in CSS

Artikel empfehlen

Eine kurze Analyse von Event Bubbling und Event Capture in js

Lösung für das Problem, dass der externe Verifizierungslastenausgleich von Docker Swarm nicht wirksam wird

So führen Sie das Excel-Tabellen-Plugin in Vue ein

Lösen Sie das Problem des MySQL-Datenverlusts, wenn Docker Redis neu startet

Detaillierte Erklärung des JavaScript ES6-Moduls

Tutorial zur HTML-Tabellenauszeichnung (15): Tabellentitel

So implementieren Sie eine Multi-Terminal-Bridging-Plattform basierend auf WebSocket in JS

Einführung und Verwendung des Javascript-Generators

Beispiel für die Implementierung eines kreisförmigen Fortschrittsbalkens in Vue

JavaScript-Einzelthread und asynchrone Details

Das Implementierungsprinzip der MySQL-Master-Slave-Synchronisation

Eine kurze Diskussion zur MySQL-Indexoptimierungsanalyse

Anwendungsverschachtelung von HTML-ul-ungeordneten Tabellen

So beenden Sie den MySQL-Prozess ordnungsgemäß und sicher

So stellen Sie Redis schnell als Docker-Container bereit