Ich habe Probleme zu verstehen, wie die mobile Auflösung funktioniert. Von dem, was ich weiß, ist Standard-Website Mobile-Auflösung 320px Breite. Das Problem scheint mit dem iPhone 4 zu sein, das eine Bildschirmauflösung von 640 Pixeln zu haben scheint, aber dennoch zeigt es Web in 320 Pixeln.
Was ist die Lösung hier? Codiere ich 2 verschiedene Auflösungen für 320px und 640px Bildschirme? Wie erzwinge ich iPhone 4 640px Web anzuzeigen?
Nun, wie Sie bemerkt haben, ist die Auflösung von iPhone 4+ 640px, aber der Browser zeigt nur 320px davon an, aus verschiedenen Gründen. Überprüfen Sie diese andere Antwort für weitere Details, wie dies geschieht: 320px Auflösung für Web-Anwendungen
Das spricht auch von der Tatsache, dass Sie das Ansichtsfenster für eine Website angeben können, um es in 640px auf einem iPhone zu sehen, aber das sollten Sie nicht tun, sondern verdoppeln Sie einfach die Auflösung auf dem Bild, das Sie verwenden.
Ich habe festgestellt, dass Websites mit einer Mindestbreite von 320 Pixeln auf den meisten High-End-Mobilgeräten wie iPhone, Android und Nokia N97 gut aussehen. Einige der Bildschirmauflösungen der gängigsten Geräte:
"iPhone 320 x 480"
"iPhone 4 320 x 480 (um den Faktor 2 skaliert)"
"HTC Legend 320 x 480"
Entweder können Sie ein adaptives Layout verwenden, wie es auf dieser Website verwendet wird (versuchen Sie, die Breite Ihres Browserfensters zu verringern, um die Website anzupassen). . Dieses Design wird auch in diesem Blogbeitrag besprochen.
Oder Sie erstellen mithilfe von Medienabfragen separate Layouts für unterschiedliche Auflösungen.
Da sich die Anzahl der Pixel von iPhone 3 auf iPhone 4 verdoppelt hat, wäre jede für das iPhone 3 optimierte Website dann ... winzig auf dem Display gewesen. Daher wurde eine devicePixelRatio eingeführt, um die Größe der Websites beizubehalten (in mm oder Zoll) und gleichzeitig die physischen Pixel zu verdoppeln. Dadurch werden Bilder und Schriften mit doppelter Auflösung (Retina) deutlich schärfer, behalten aber die alten CSS-Schrift- und Pixelgrößen bei. p>
Das devicePixelRatio ist 2: 1 auf iPhone 4 und 5. Das bedeutet, dass ein in css mit 100100px definiertes Bild tatsächlich 200x200 physikalische Pixel einnimmt. So können Sie die Seite immer noch mit einer Gesamtbreite von 320 Pixeln formatieren. 320 Dips - geräteunabhängige Pixel.
Beachten Sie, dass die devicePixelRatio auch auf Android vorhanden ist, wo sie von 1,5 bis 3 reicht.
Auf diese Weise wird CSS für Landscape und Protrait separat geladen.
%Vor%So wird die Auflösung behandelt.
Die gebräuchlichsten mobilen Bildschirmgrößen sind 320x240, 480x320, 800x480, 960x480, 1024x800 und 1024x768.
Tags und Links css iphone screen-resolution