在响应式设计方面,您如何处理高分辨率手机,如Galaxy S4?

时间:2013-05-10 20:16:28

标签: html css html5 css3 responsive-design

过去,您将使用基于像素宽度的媒体查询来确定最终用户将获得的显示内容。但是,当您使用更高分辨率的设备(如Galaxy S4(1080x1920)分辨率)时,这不起作用/不起作用。

你是如何处理的?

2 个答案:

答案 0 :(得分:23)

是什么让您认为媒体查询不起作用?

显然,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

答案 1 :(得分:6)

不确定您的响应式设计使用的框架,但使用Bootstrap我将其添加到<head>并且它对我有用:

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

这里有一些很好的信息:

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

具体而言,“视口”主题下的部分解决了您的问题。