Html Nexus 5 媒体查询？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19796942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nexus 5 Media Queries?
提问by Joshua
I am trying to write a mobile site for college using CSS media queries, however when I try to target the Nexus 5 using:
我正在尝试使用 CSS 媒体查询为大学编写一个移动网站，但是当我尝试使用以下方法定位 Nexus 5 时：
@media only screen and (min-width : 20em)
(Remember 20em = 320px) it doesn't work and instead fills the page roughly 90% on the X and Y axis.
（记住 20em = 320px）它不起作用，而是在 X 和 Y 轴上填充页面大约 90%。
The Viewport I am using is so:
我使用的视口是这样的：
<meta content="width=device-width, user-scalable=no" name="viewport">
I was thinking of writing a media query based on pixel ratio, but failed to find any answers via Google as to the ratio of the N5.
我想写一个基于像素比的媒体查询，但没有通过谷歌找到任何关于 N5 比例的答案。
Any help would be greatly appreciated.
任何帮助将不胜感激。
Thanks
谢谢
回答by user934902
Try this viewport, setting the initial scale will prevent zooming. You can set your media query to around 767px (this will cover pretty much all mobile phones)... 768 gets you into tablet portrait views. With some crafty CSS (using percentages for your layout) your site should function great across all phones
试试这个视口，设置初始比例将防止缩放。您可以将媒体查询设置为 767 像素左右（这将涵盖几乎所有手机）... 768 可让您进入平板电脑纵向视图。使用一些巧妙的 CSS（使用百分比布局），您的网站应该在所有手机上都能正常运行
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
回答by TJSimons
The Nexus 5 device width is actually 360, or 22.5em based on 16px.
Nexus 5 设备宽度实际上是 360，或基于 16px 的 22.5em。
What I normally do is after 767px (1px less than most tablets) I switch to percent based, single column layouts to accommodate all the one off devices. I'll then set my browser window, and/or test on the device if I have it, at each popular viewport and fix any one off issues.
我通常做的是在 767px（比大多数平板电脑少 1px）之后切换到基于百分比的单列布局以容纳所有一次性设备。然后，我将在每个流行的视口设置我的浏览器窗口，和/或在设备上进行测试（如果有）并修复任何一个问题。
This approach is geared more for my work environment, which is very production oriented; we don't get a lot of time per site.
这种方法更适合我的工作环境，非常以生产为导向；我们在每个站点上没有很多时间。
回答by Benny Neugebauer
With this media query you can catch the Google Nexus 5:
通过此媒体查询，您可以找到Google Nexus 5：
@media only screen
and (min-width: 360px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3.0) {
* {
background-color: black;
}
}
For safe handling of the specified width, the following should be placed in the <head>section of the HTML document:
为了安全处理指定的宽度，应将以下内容放置在<head>HTML 文档的部分中：
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
