Question

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

非常感谢任何帮助。

由于

Answer 1

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

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

Answer 2

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

我通常做的是在767px之后（比大多数平板电脑低1倍）我切换到基于百分比的单列布局以适应所有一次性设备。然后我会在每个热门视口设置我的浏览器窗口，和/或在设备上进行测试，并解决任何一个问题。

这种方法更适合我的工作环境，这是非常注重生产的;我们没有为每个网站节省大量时间。

Answer 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" />

Nexus 5媒体查询？

3 个答案: