Implementierungsmethode zur Größenanpassung mobiler Webseiten

Das anstehende Projekt ist endlich abgeschlossen, die vermisste Person ist zurück! Während der Arbeit an dem Projekt bin ich auf viele Punkte gestoßen, über die es sich zu bedenken lohnt. Lassen Sie uns diese kurz erläutern. Das erste Problem, auf das gestoßen wird, ist das Problem der Anpassung der Webseitengröße.

Die derzeit am häufigsten verwendeten Methoden sind:

• Stellen Sie zunächst sicher, dass die Seitengröße den Bildschirm ausfüllt, ohne dass sie überläuft . Sie müssen nur das Ansichtsfenster (wie unten gezeigt) im html-Tag hinzufügen. Die Parameter stellen jeweils dar: Das maximale und das minimale Skalierungsverhältnis sind 1, und Benutzer dürfen nicht hineinzoomen aus.

<meta name="viewport" content="width=device-width,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

• Prozentadaptiv: Konvertieren Sie die Längeneinheit in einen Prozentsatz, sodass sich Länge und Breite des Elements bei unterschiedlichen Breiten entsprechend ändern.

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

Nachteile: Die Anpassung der Schriftgröße erfordert einen anderen Satz adaptiver Methoden. Wenn die Bildschirmbreite größer als 700 Pixel ist, werden die Elemente zu groß, wenn sie weiterhin auf Prozentsätzen basieren, und es wird problematischer zu diesem Zeitpunkt anzupassen.

•rem, em adaptiv: Verwenden Sie die Medienabfragemethode, um die Schriftgröße von bei verschiedenen Bildschirmbreiten zu bestimmen. Verwenden Sie dann rem und em anstelle von px als Einheit, um eine Anpassung zu erreichen.

Vorteile: Es kann auf unterschiedliche Bildschirmbreiten eingestellt werden, wodurch das oben erwähnte Proportionsproblem bei zu großem Bildschirm perfekt gelöst werden kann. Auch mit der Schriftgröße gibt es kein Problem.

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

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

Diese Kompatibilität Jede dieser Methoden hat ihre eigenen Vor- und Nachteile. 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 sich die Schriftgröße der Seite automatisch an die Breite des Bildschirms anpasst und der Quotient aus der Bildschirmbreite und der eingestellten Schriftgröße ist bestimmt.

Ich vermute also, dass es JS verwendet, um die Bildschirmbreite zu ermitteln, es dann entsprechend einem festen Verhältnis verkleinert und es als Einheitslänge von rem verwendet, um die Anpassung zu implementieren.

Ist das nicht eine Lösung mit allen Vorteilen! ? Bitte erlaube mir, aufgeregt zu sein (☆_☆)

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

JS-Code ist sehr einfach zu schreiben und löst perfekt das Problem der Verwendung von rem zum Einrichten nahtloser Verbindungen.

Aber das Problem trat auf, nachdem Safari auf dem mobilen Endgerät den JS blitzschnell ausgeführt hatte, bevor der HTML-Code geladen wurde, bevor die Breite der Seite entsprechend dem Ansichtsfenster festgelegt wurde . Die falsche Breite führt dazu, dass das Element doppelt so groß wird wie 0^0. Zur Lösung des Problems muss SetTimeout() verwendet werden.

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

Endgültiger Code

Zepto(function($){   
    var win = window,   
        doc = document;   
  
    function setFontSize() {   
        var winWidth =  $(window).width();   
        // 640宽度以上进行限制   
        var size = (winWidth / 640) * 100;   
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + &#39;px&#39; ;   
    };   
       
    //防止在html未加载完毕时执行，保证获取正确的页宽   
    setTimeout(function(){   
        // 初始化   
        setFontSize();   
           
    }, 200);   
    
});

Schließlich habe ich eine Falle hinzugefügt, die bei der Verwendung von rem zur Anpassung entdeckt wurde: Wenn der HTML-Code auf eine größere Schriftgröße eingestellt ist, werden der Rand und der Abstand der Inline-Elemente geändert Das Blockelement hat zusätzliche Werte. Die Lösung besteht darin, die Schriftgröße des äußeren Blockelements auf 0 zu setzen.

Der obige Artikel zum Implementieren der selbstanpassenden Größe mobiler Webseiten ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben und hoffe, dass Sie die chinesische PHP-Website unterstützen.

Weitere verwandte Artikel zur Implementierung der adaptiven Webseitengröße auf mobilen Endgeräten finden Sie auf der chinesischen PHP-Website!