媒体查询 - 仅适用于 iPhone 横向的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7290338/
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
Media Queries - CSS only for iPhone landscape
提问by Dee
Are the same methods used to write CSS only for iPhone in landscape mode?
用于在横向模式下为 iPhone 编写 CSS 的相同方法是否相同？
采纳答案by Jason Gennaro
You could do this
你可以这样做
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0">
That forces the iPhone to render viewport the same as the device width.
这会强制 iPhone 渲染与设备宽度相同的视口。
Then use this css to target the landscape mode, which is +320pxwide
然后使用这个css来定位横向模式，它是+320px宽的
@media screen and (min-width: 321px){
//styles
}
回答by Mattia Astorino
Yes, sure. Check: http://www.w3.org/TR/css3-mediaqueries/#orientation
是的，当然。检查：http: //www.w3.org/TR/css3-mediaqueries/#orientation
@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
If you want to target iphone only you have to add the resolution or the dppx density to these MQ.
如果您只想针对 iphone，您必须将分辨率或 dppx 密度添加到这些 MQ。
回答by ajsharma
If I understand you correctly, and you want to know the media queries to target a smartphone like the iPhone only when it is held horizontally, try something like this:
如果我理解正确，并且您想知道仅在水平握持 iPhone 等智能手机时的媒体查询，请尝试以下操作：
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* styles go here */
body {
}
}
回答by Nicolas Lagarde
actually if you use :
实际上，如果您使用：
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0">
then you prevent user to zoom at any time, which can cause usability problems.
那么您可以随时阻止用户进行缩放，这可能会导致可用性问题。
I would recommand you to use :
我建议你使用：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In this case, you force your page to be displayed at it's original initial scale, and so then you can target different layout sizes with your media queries, as the layout will be resized when you will rotate your iPhone :
在这种情况下，您强制页面以其原始初始比例显示，然后您可以使用媒体查询定位不同的布局大小，因为当您旋转 iPhone 时布局将调整大小：
@media only screen and (min-width: 480px) {
/* landscape mode */
}
@media only screen and (max-width: 479px) {
/* portrait mode */
}
And the user can still pinch the page to zoom.
并且用户仍然可以捏住页面进行缩放。
