@media：如果三星 Galaxy s4 是 1920x1080？答案

【问题标题】：@media: if samsung galaxy s4 is 1920x1080?@media：如果三星 Galaxy s4 是 1920x1080？
【发布时间】：2013-05-31 04:29:29
【问题描述】：

<link rel="stylesheet" media="only screen and (max-width:1280px)" href="css/article1280.css">

我正在编写响应式 CSS 代码，我意识到三星 Galaxy S4 智能手机的屏幕分辨率为 1080x1920 — 我的 23 英寸显示器为 1920x1080。我从未在这款手机上浏览过（我有一部 iPhone 3 的分辨率为 320x480，这是我认为所有智能手机大约，宽度低于 800 像素）所以我有点困惑。我应该如何为智能手机创建一个移动网站屏幕分辨率为 1080x1920？

【问题讨论】：

您的网站是否无法以当前形式使用？
非常有用，但如果要在手持设备中使用，我想让所有导航变得更大更易于使用，并将所有内容缩小到单列。
你在使用视口元标记吗？没有它，媒体查询将没有任何效果。
我也想问一下视口元标记。我读过一个网站说，虽然 iPhone 5 的分辨率宽度是 980 像素，但实际上是 320 像素。这就是视口元标记起作用的原因吗？
Galaxy 有什么特别之处，它应该有特定的风格，而另一款具有类似分辨率的设备却没有？如果答案是 touch，那么你是在用媒体查询找到错误的树。

标签： css smartphone

【解决方案1】：

经过测试并且可以正常工作！

@media screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px), screen and (max-width: 480px)

【讨论】：

【解决方案2】：

确保您的 head 部分中有 viewport 元标记。像这样：

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

这告诉用户代理考虑像素密度并相应地重新缩放。所以你的 1080 像素宽的三星 Galaxy S4 将像一个 360 像素宽的屏幕。

【讨论】：

【解决方案3】：

在 GS4 上进行设计时，除非您在标题中使用视口标签，否则它会呈现为常规宽屏。我发布了我用来使其响应的示例@@Samsung Galaxy S4 Responsive Design @media

【讨论】：

【解决方案4】：

Galaxy S4 向浏览器报告 360px x 640px

纵横比为 9/16

像素比为 3

@media screen and (max-device-width: 360px)

@media screen and (-webkit-min-device-pixel-ratio: 3)

@media screen and (device-aspect-ratio: 9/16)

【讨论】：

【解决方案5】：

使用@media screen and (max-device-width: your dimension here)。

【讨论】：

为什么使用设备宽度？如果有人在较小的浏览器窗口上查看，最好以最佳方式显示

【解决方案6】：

在这种情况下您可能会发现一些有用的媒体查询是：

@media screen and (orientation: portrait | landscape) { ... }

@media screen and (device-aspect-ratio: #/#) { ... }

这是一个包含更多信息的链接：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

【讨论】：