Ich arbeite gerade an einer Site für einen Client (noch in Arbeit) und versuche, einige der mobilen Probleme auf der Site zu beheben.
Das Hauptproblem, das ich habe, ist, dass mobile Browser (Android + iPhone) laden Sie die Website vollständig gezoomt auf der linken oberen Teil der Website. Ich möchte, dass die Größe des gesamten Darstellungsbereichs im Ansichtsfenster vergrößert wird, unabhängig von der Breite des Darstellungsbereichs.
Die Seite kann hier angesehen werden: Ссылка
Gibt es eine einfache Lösung dafür? Ich bin erfahren mit HTML / CSS, aber ich bin ein bisschen Neuling, wenn es um mobile Browser geht.
Hier ist etwas HTML in meiner Datei header.php, das relevant sein könnte. Ich habe versucht, die Eigenschaft width ohne Erfolg zu ändern. Die anfängliche Skalierungseigenschaft ist effektiv, aber zu breit - ich möchte, dass die Seite für alle mobilen Browser vollständig ausgezoomt wird, unabhängig von der Ausrichtung oder der Bildschirmgröße.
Gibt es eine Möglichkeit, dies zu tun?
Ich bin fast sicher, dass
%Vor%sollte dieses Problem lösen. Sie können "width" auf den von Ihnen gewünschten Wert einstellen, aber wenn Sie ihn auf die Gerätebreite einstellen, passt er sich an die Pixelbreite des Geräts an. "initial-scale" steuert die Zoomstufe in der angegebenen Breite.
Es scheint, dass die meisten mobilen Browser dazu neigen, eine Standard-Darstellungsfeldbreite zu kommunizieren, die erheblich breiter ist als die Breite des Mobiltelefons. Zum Beispiel geht iOS Safari davon aus, dass eine Webseite 980px breit ist, und zoomt aus, um die ganze Menge innerhalb des verfügbaren iPhone 4 320px ( Ссылка ). Android-Browser passen sich tendenziell einer Breite zwischen 800 und 1024 CSS-Pixeln an ( Ссылка ).
Die erwartete Breite scheint irgendwie zu kommunizieren, bevor das Meta-Tag implementiert wird, und in einigen Situationen scheint die Breite auf die Breite des Geräts eingestellt zu sein. Wenn das CSS auf Ihrer Seite keine Medienabfragen verwendet, um sich an die tatsächliche Breite des Geräts anzupassen, ist es meiner Meinung nach besser, den Teilbreite "width = device-width" nicht zu verpassen und nur die anderen Einschränkungen für Sie festzulegen sind danach.