So gestalten Sie den Inhalt mobiler Webseiten anpassungsfähig

Dieses Mal zeige ich Ihnen, wie Sie die Webinhalte auf dem mobilen Endgerät anpassen können. Welche Vorsichtsmaßnahmen es gibt, um die Webinhalte auf dem mobilen Endgerät anzupassen .

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. Fügen Sie einfach viewport (wie unten gezeigt) im html-Tag hinzu. Die Parameter stellen jeweils dar: Seitenbreite = Bildschirmbreite, das maximale und minimale Skalierungsverhältnis sind jeweils 1 und Benutzer dürfen nicht zoomen .

<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 Methode Medienabfrage, um zu bestimmen, wie die Schriftgröße von bei verschiedenen Bildschirmbreiten geändert werden soll. Verwenden Sie dann rem, 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 während des adaptiven Prozesses der Verwendung von rem entdeckt wurde: Wenn der HTML-Code auf eine größere Schriftgröße eingestellt ist, werden die Inline-Elemente margin und padding innerhalb des Blockelements erscheint. Für zusätzliche Werte besteht die Lösung darin, die Schriftgröße des umgebenden Blockelements auf 0 zu setzen.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Wie man mit einem Inhaltsüberlauf in der Tabelle umgeht

So erhält man die dynamische Anzahl der verbleibenden Wörter of textarea

htmlWichtige Wissenspunkte, die Sie über PHP wissen müssen

Das obige ist der detaillierte Inhalt vonSo gestalten Sie den Inhalt mobiler Webseiten anpassungsfähig. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!