7

我正在尝试使用 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 比率的任何答案。

任何帮助将不胜感激。

谢谢

4

3 回答 3

9

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

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
于 2013-11-05T19:23:52.617 回答
4

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

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

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

于 2014-01-28T16:51:52.307 回答
4

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

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

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

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
于 2014-03-19T12:45:47.050 回答