das iPhone 5 ist nicht die Darstellung der responsive Modus der website richtig

Habe ich erstellt diese website, und so weit ich habe nicht in der Lage gewesen, um herauszufinden, warum nur auf bestimmte iPhone-Handys, die website wird nicht angezeigt, in Ihrer responsive-Modus. (es zeigt korrekt auf den meisten iPhone-Handys).

Hier ist, was ich bisher getan habe:

  1. Überprüft die website auf Android-Geräten: es sieht gut aus
  2. Überprüfen Sie die responsive website auf verschiedenen Browsern: es funktioniert
  3. Verwenden online iphone-Simulatoren, um zu sehen, wie die website aussieht: Zeigt feine
  4. Gelöscht, browser-cache und cookies auf dem iPhone-Geräte das problem haben, zeigt die responsive-Modus: immer Noch kein Glück

Hier ist ein Bild wie die homepage Aussehen SOLL, wie in iphones.

das iPhone 5 ist nicht die Darstellung der responsive Modus der website richtig

  • Ich sehe, Sie sind mit bootstrap... Warum nicht die Verwendung von bootstrap-Funktionen? Ich würde sagen, wenn Sie sich bewegen, Bootstrap v3, sollte Ihre Probleme einfach gelöst werden.
InformationsquelleAutor farjam | 2013-10-04
  1. 9

    versuchen, verwenden Sie folgende media query 

    @media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES GO HERE */}

    du mit max-width, die die Breite der Anzeige von Ziel-Bereich, wo die max-device-width ist die Breite des Gerätes ist die gesamte rendering-Bereich.

    ich hoffe, es wird Ihnen helfen,

    • Leider geht das bei mir nicht funktioniert entweder. Ich habe versucht, Ihre Anregungen und andere Vorschläge von anderen Leuten in diesem thread, aber das "fehlerhafte iphones" nicht erscheinen, nehmen Sie in account.
    • auch konnte ich sehen das problem auf android-Geräten so gut aus Und was ich denke, es ist wegen der 100% Höhe, damit die immer die Höhe des Geräts, aber nicht die Breite, so können Sie versuchen, die Breite 100% statt 100% Höhe. Und guter Ansatz nach mir sein wird, mit min-width und max-width
    • Ihr Kommentar zu die 100% Höhe haben mein Leben gerettet 🙂 ich habe die Körpergröße auto auf dem Handy und es funktioniert jetzt perfekt.
    • Farjam, ich habe das gleiche problem jetzt. Es wird angezeigt, um zu zeigen, gut auf Android-Handys, aber nicht Iphones. Und auf Simulatoren, etc. es sieht gut aus. Ich habe versucht, den Körper auf Höhe auto, aber es funktioniert nicht für mich. Irgendwelche Tipps?
    InformationsquelleAutor Umar Khan
  2. 6

    Ich würde davon ausgehen, dass Ihr problem nicht mithilfe der viewport-meta-tag. Mobile Geräte haben oft eine viel höhere pixel-Dichte als ein desktop-display, die dazu führen können media queries nicht korrekt gelesen werden.

    versuchen Sie, so etwas an den Kopf-Abschnitt:

    <meta name="viewport" content="width=device-width,initial-scale=1" />
    • Ich habe das exakte Linie im Kopf 🙂 <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • Ah, ich entschuldige mich für nicht zu sehen, dass.. In diesem Fall, versuchen Sie, sicherzustellen, dass der säumige Gerät nicht über "Zoom" aktiviert, in den Einstellungen für die Barrierefreiheit. Ändern dies ist oft eine Lösung für dieses Problem, so stellen Sie sicher, aktualisieren Sie die Seite nach der änderung.
    • Ich habe gerade überprüft und verifiziert, dass der zoom nicht aktiviert ist, entweder.
    • Dies ist so ein wichtiges Stück, die ich IMMER scheinen zu lassen...
    InformationsquelleAutor Blake Mann
  3. 0

    Den meta viewport - tag ist nicht das Problem.

    Mehrere viewport-tests schauen wie es soll.

    Überprüfen Sie die CSS-media-Anrufe, vereinfachen Sie und stellen Sie sicher, dass Sie nicht gegenseitig überschreiben.

    Javascript ist nicht das Problem entweder. Ich habe es deaktiviert alle.

    Können Sie auch die Vorteile von bestimmten media queries für das iPhone:

    <!-- iPhone 4+ -->
@media only screen and (device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    /* CSS3 Rules for iPhone */
}

    Hoffe, das hilft!

    • Leider geht das bei mir nicht funktioniert entweder. Ich habe versucht, Ihre Anregungen und andere Vorschläge von anderen Leuten in diesem thread, aber das "fehlerhafte iphones" nicht erscheinen, nehmen Sie in account.
    InformationsquelleAutor Oriol
  4. 0

    Versuchen, eine Breite von 568 für iphone5

    InformationsquelleAutor Jonathan Pyper
  5. 0
    /* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
and (device-width : 320px) 
and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}
    • Bitte geben Sie irgendeine Art von Erklärungen auch während der Beantwortung..
    InformationsquelleAutor user3420765
  6. 0
    /* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
and (device-width : 320px) 
and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}
}
    InformationsquelleAutor xdsdsdsdsssssss
Schreibe einen Kommentar