Ich verwende ein kostenloses Thema für WordPress. Ich habe das Design angepasst, um meine Bedürfnisse zu erfüllen, aber es gibt Probleme mit dem Design, wenn ich die Website mit meinem iPhone oder iPad öffnen. Ich habe alles versucht, was ich weiß. Kann mir jemand helfen, die Ursache dieses Problems zu identifizieren? [Link zu meiner Website.] [1]Responsive Design funktioniert auf dem Desktop, aber nicht iphone
Versuchen Sie, diese Medien-Abfrage für iPhone 6/6 Plus und Apple Watch CSS Medien fragt
@media only screen and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{ }
iPhone 6 Porträt
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ }
iPhone 6 Plus Landschaft
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ }
iPhone 6 Plus Portrait
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
und (-webkit-min-device-Pixel-Verhältnis: 3) } {
iPhone 6 und 6 Plus
@media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }
Apple Watch
@media
(max-device-width: 42mm)
and (min-device-width: 38mm)
{ }
Für Bild ansprechbar
img {
max-width: 100%;
}
Danke. Die iPhone-Ansicht sieht perfekt aus, wenn ich sie mit Tools wie [http://quirktools.com/screenfly/] abgucke, aber immer noch nicht mit der echten iPhone-Ansicht funktioniert. Haben Sie einen Vorschlag für einen guten Simulator? – Eman
sollten Sie sicherstellen, dass alle Bilder auch reagieren. Für Bild responsive bitte den obigen Post am Ende überprüfen. –
Sie müssen reagierende Schiebereglerbilder erstellen und die Schriftgröße verringern, wenn Sie dynamischen Text innerhalb des Schiebereglers verwenden. –
Sind Sie mit dem reaktions Meta-Tag?
<meta name="viewport" content="width=device-width"> oder <meta name="viewport" content="width=device-width, initial-scale=1">
Durch Problem meine ich die großen, leeren Raum, der den Header und Navigationsleiste zeigt vor. – Eman