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

Question

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

你怎么处理这个？

Answer 1

是什么让你认为媒体查询不起作用？

显然,Galaxy S4的CSS像素比为3.0,因此,其物理分辨率为1080x1920,其CSS分辨率仍然是360x640 - 类似于Galaxy S3.

还有媒体查询测试像素密度.它们可以帮助您将高分辨率图片或矢量图形提供给hi-dpi设备.

另外,看看这篇文章:

很棒的屏幕规格数据库

Answer 2

不确定你的响应式设计使用的框架,但使用Bootstrap我添加了这个<head>并且它对我有用:

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

这里有一些很好的信息:

具体而言,"视口"主题下的部分解决了您的问题.