2013-05-10 2 views
20

In der Vergangenheit verwendeten Sie Medienabfragen basierend auf der Pixelbreite, um zu bestimmen, welche Anzeige der Endbenutzer erhält. Dies funktioniert jedoch nicht/wird nicht funktionieren, wenn Sie ein Gerät mit einer höheren Auflösung wie zB eine Galaxy S4 (1080x1920) Auflösung verwenden.In Bezug auf Responsive Design, wie gehen Sie mit Handys mit hoher Auflösung, wie dem Galaxy S4?

Wie gehen Sie damit um?

+5

AFAIK es funktioniert immer noch, weil ein Pixel kein Pixel ist http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html – Prinzhorn

+0

Was genau funktioniert nicht? http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ – cimmanon

+0

Zunächst wird das Ansichtsfenster bereits auf hochauflösende Geräte wie dieses skaliert, normalerweise auf '980px' . Sie können dies ändern, um die native Auflösung zu verwenden. Abhängig von Ihren Bedürfnissen, Basis-Zeug auf 'ems' und dieses Problem funktioniert sich automatisch aus. Bei den meisten Geräten ist '1em' auf eine lesbare Größe eingestellt. Dies kann jedoch ein echtes Problem bei Anzeigen sein, die immer auf Pixelgröße festgelegt sind. – Brad

Antwort

22

Woran denken Sie, dass Medienanfragen nicht funktionieren?

Offenbar ist Galaxy S4 CSS-Pixel-Verhältnis 3,0, daher ist seine physikalische Auflösung 1080x1920, seine CSS-Auflösung ist immer noch 360x640 - ähnlich wie bei Galaxy S3.

Es gibt auch Medienabfragen, die auf Pixeldichte testen. Sie können Ihnen dabei helfen, hochauflösende Bilder oder Vektorgrafiken für Hi-DPI-Geräte bereitzustellen.

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density#Samsung

http://bjango.com/articles/min-device-pixel-ratio/

Plus einen Blick auf diesen Artikel:

http://www.html5rocks.com/en/mobile/high-dpi/

Ehrfürchtig Datenbank Bildschirm Spezifikationen

http://screensiz.es/phone

+0

Danke für die Antworten alle, das macht mir jetzt viel mehr Sinn. –

4

nicht sicher, welche Rahmen Sie für Ihr Responsive Design verwenden, aber Bootstrap verwenden habe ich dies zu <head> und es funktionierte für mich:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

einige gute Informationen über diese gibt es hier:

http://www.html5rocks.com/en/mobile/mobifying/

Insbesondere der Abschnitt unter dem Thema "Viewports" adressiert Ihre Frage.

Verwandte Themen