Responsive Skalierung für mobile Websites, um die volle Handybreite zu haben

Question

Angenommen, alle Elemente im Body können auf 100% gestreckt werden - Außer etwas Ähnlichem zu tun wie dies:

body {
     overflow-x:hidden;
     width:320px;
}

@media all and (min-width: 360px) {
    body {
        width:360px;
    }
}

@media all and (min-width: 369px) {
    body {
        width:369px;
    }
}

@media all and (min-width: 480px) {
    body {
        width:480px;
    }
}

@media all and (min-width: 533px) {
    body {
        width:533px;
    }
}

@media all and (min-width: 569px) {
    body {
        width:569px;
    }
}

@media all and (min-width: 640px) {
    body {
        width:640px;
    }
}

Gibt es einen besseren / weniger fest codierten Ansatz als den obigen?

Außerdem gibt es gemischte Meinungen darüber, dies auf Mobile zu verwenden:

Lesen Sie, dass der initiale Zoom (Fehler) zwischen Hoch- und Querformat in iOS 6 für das iPad behoben wurde und somit das oben Genannte nicht mehr benötigt wird...

Aber kann ich annehmen, dass dies immer noch erforderlich ist für neue und alte iPhones sowie für andere mobile Geräte von Android und Samsung?

Answer 1

Das Problem wurde gefunden. Alle Media Queries sind nicht erforderlich für eine Website in voller Breite (obwohl dies eine umfangreiche Liste ist, die die meisten Geräte abdeckt).

Nur das Folgende ist ausreichend, wie ursprünglich geplant (das overflow-x dient nur als Versicherung):

body {
     overflow-x:hidden;
     width:100%;
}

Ich hatte jedoch ein Navigations-Element der 2. Ebene mit position:absolute, left:100% und width:100%, das die tatsächliche Website-Breite auf dem Telefon verzerrte (was zu einer wirklich breiten Website führte, wahrscheinlich so breit wie die Auflösung des Telefons).

Als die left-Position des Elements nur durch JavaScript festgelegt wurde (anstatt beim ersten Laden der Website vom Telefon abgelesen zu werden), wurde das Problem behoben.

Die Lektion ist, Vorsicht mit position: absolute Elementen auf Mobilgeräten, auch bei overflow hidden, diese können die tatsächliche Seitengröße verzerren, die vom Telefon erkannt wird.

Ich musste auch das Meta-Viewport für Telefone einbeziehen... Obwohl weitgehend als die Antwort für die iPad-Website-Skalierung akzeptiert, hat width=device-width und initial scale tatsächlich meine Website-Skalierung zwischen Hoch- und Querformat auf dem iPad (neueste Betriebssystem) durcheinander gebracht.

Wenn ich es nicht hatte, funktioniert die Skalierung perfekt! Ich muss auf dem iPhone (neuestes Betriebssystem) testen, um festzustellen, ob es sich wie das iPad verhält (wo der Orientierungsfehler behoben sein soll).

if (!navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, initial-scale=1';
    }
}