CSS 针对 iphone/mobile/ipad 的媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19157088/
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 query to target iphone/mobile/ipad
提问by Kango
I am using media query to target iphone/ipad/mobile.
我正在使用媒体查询来定位 iphone/ipad/mobile。
I have written the following media query.
我编写了以下媒体查询。
But my problem is if i write css in media query of mobile 'max-device-width : 480px' it will also apply to iphone.
但我的问题是，如果我在移动媒体查询中编写 css 'max-device-width : 480px' 它也适用于 iphone。
Is i am doing wrong ??
我做错了吗？？
For mobile : like samsung grand(480 * 800):
@media only screen
and (max-device-width : 480px)
{
}
For iphone:
@media only screen
and (max-device-width : 320px)
{
}
For ipad:
@media screen and (min-width:760px)
{
}
Also added meta tag:
还添加了元标记：
<meta name="viewport" content="user-scalable=no,initial-scale=1">
回答by Rajnikant Kakadiya
Try with below media query and meta tag
尝试使用以下媒体查询和元标记
/* For mobile : like samsung grand(480 * 800): */
@media screen and (max-width : 480px){}
/* For iphone: */
@media screen and (max-width : 320px){}
/* For ipad: */
@media screen and (max-width : 768px){}
Additionally. change your meta tag:
此外。更改您的元标记：
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
回答by Seano
Rajnikant's answer is indeed the correct one, except that the iPad max-width is wrong. It should be 768px:
Rajnikant 的答案确实是正确的，只是 iPad 最大宽度是错误的。它应该是 768px：
/* For ipad: */
@media screen and (max-width : 768px){}
回答by Roy Goldshtein
I took the answer from http://cssmediaqueries.com/target/
我从http://cssmediaqueries.com/target/ 得到了答案
//HTC One, Samsung Galaxy S5, OnePlus One
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)
//Samsung Galaxy S2
@media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5)
//Samsung Galaxy S3
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2)
//Samsung Galaxy S4
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)
//LG Nexus 4
@media screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2)
//LG Nexus 5, Huawei Ascend P7
@media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3)
//Asus Nexus 7
@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332)
//iPad 1, iPad 2, iPad Mini
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1)
//iPad 3, iPad 4
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)
//iPhone 3G
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)
//iPhone 4
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)
//iPhone 5
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)
//iPhone 6
@media screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)
//iPhone 6 Plus
@media screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)
//Huawei Ascend P6
@media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2)
