在響應式設計方面，您如何處理高分辨率手機，如Galaxy S4？

從歷史上看，您將使用基於像素寬度的媒體查詢來確定最終用戶將獲得的顯示內容。但是，當您使用高分辨率設備（如Galaxy S4（1080x1920）分辨率）時，該功能不起作用。在響應式設計方面，您如何處理高分辨率手機，如Galaxy S4？

你是如何處理這個問題的？

2013-05-10 Drew Gorman

AFAIK它仍然有效，因爲像素不是一個像素http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html – Prinzhorn 2013-05-10 20:22:40

什麼不工作？ http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ – cimmanon 2013-05-10 20:24:27

首先，視口已經在像這樣的高分辨率設備上縮放，通常是'980px' 。您可以將其更改爲使用原始分辨率。根據你的需要，基於'ems'的東西，這個問題會自動解決。大多數設備都將'1em'設置爲可讀大小。這可能會成爲廣告的一個實際問題，儘管這些問題總是固定爲像素大小。 – Brad 2013-05-10 20:47:30

是什麼讓你認爲媒體查詢不起作用？

顯然，Galaxy S4的CSS像素比例爲3.0，因此，雖然其物理分辨率爲1080x1920，但其CSS分辨率仍然爲360x640 - 與Galaxy S3類似。

還有媒體查詢測試像素密度。他們可以幫助您將高分辨率圖片或矢量圖形提供給hi-dpi設備。

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

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

另外，看看這篇文章：

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

屏幕規格的真棒數據庫

http://screensiz.es/phone

來源

2013-05-10 23:37:42 Evgeny

感謝所有的答案，這使我對現在更有意義。 – 2013-05-13 15:11:32

不知道你正在使用您的響應式設計什麼框架，但使用引導我加入這<head>和它的工作對我來說：

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

這裏有一個關於這一些好的信息：

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

具體來說，「視口」主題下的部分解決了您的問題。

來源

2014-04-27 01:26:41 ahaurat

在響應式設計方面，您如何處理高分辨率手機，如Galaxy S4？

回答

相關問題