Nexus 5 媒体查询？答案

【问题标题】：Nexus 5 Media Queries?Nexus 5 媒体查询？
【发布时间】：2013-11-16 19:06:52
【问题描述】：

我正在尝试使用 CSS 媒体查询为大学编写移动网站，但是当我尝试使用 Nexus 5 时：

@media only screen and (min-width : 20em)

（记住 20em = 320px）它不起作用，而是在 X 和 Y 轴上填充页面大约 90%。

我使用的视口是这样的：

<meta content="width=device-width, user-scalable=no" name="viewport">

我正在考虑编写基于像素比率的媒体查询，但未能通过 Google 找到关于 N5 比率的任何答案。

任何帮助将不胜感激。

谢谢

【问题讨论】：

20em 不一定等于 320px。 Em 单位与所使用的字体相关。
好的，我已经改变了这个，但仍然遇到问题。谢谢！
理想情况下，您不应该针对特定设备，而是针对您的设计进行定位，这样网站在任何规模下都看起来很棒。通过调整浏览器大小来测试它。
Google Nexus 5 的宽度为 1080 像素，而 Nexus 5 的像素比为 1:3，因此它是 360 像素而不是 320 像素，因为 360 * 3 = 1080。

标签： html css media-queries

【解决方案1】：

试试这个视口，设置初始比例会阻止缩放。您可以将媒体查询设置为大约 767 像素（这将涵盖几乎所有手机）... 768 让您进入平板电脑纵向视图。使用一些巧妙的 CSS（在布局中使用百分比），您的网站应该可以在所有手机上运行良好

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

【讨论】：

767？我认为大多数手机都将其用户代理设置为以 320 像素获取媒体查询……至少我的 Lumia 和现在的 Nexus 都有……？
现在很多手机的宽度都超过了 320px，而且浏览器读取你的 CSS 就像你的电脑一样，并且会以同样的方式处理媒体查询。确保您的设备不会通过设置适当的视口标签来尝试缩放任何东西，这将为您在各种智能手机上提供统一的外观，我对平板电脑使用 maxwidth 1024/minwidth 768 的视口，而对所有手机使用小于 767 的视口及其工作到目前为止喜欢一个魅力

【解决方案2】：

Nexus 5 设备的宽度实际上是 360，或者 22.5em，基于 16px。

我通常会在 767 像素（比大多数平板电脑少 1 像素）之后切换到基于百分比的单列布局，以适应所有一次性设备。然后，我将在每个流行的视口设置我的浏览器窗口，和/或在设备上进行测试（如果有），并修复任何一个问题。

这种方法更适合我的工作环境，它非常以生产为导向；每个站点我们没有太多时间。

【讨论】：

【解决方案3】：

通过此媒体查询，您可以捕获 Google Nexus 5：

@media only screen 
and (min-width: 360px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3.0) {
  * {
    background-color: black;
  }
}

为了安全处理指定的宽度，应将以下内容放在 HTML 文档的 <head> 部分：

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

【讨论】：