媒体查询目标iphone/mobile/ipad

我正在使用媒体查询来定位iphone/ipad/mobile。媒体查询目标iphone/mobile/ipad

我写了下面的媒体查询。

但我的问题是，如果我在手机媒体查询中写入CSS'max-device-width：480px'，它也适用于iphone。

我做错了吗？

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) 
{ 

}

还添加meta标签：

<meta name="viewport" content="user-scalable=no,initial-scale=1">

来源

2013-10-03 Kango

试试下面媒体查询和meta标签

/* 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){}

此外。改变你的meta标签：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

来源

2013-10-03 11:03:08

Rajnikant的答案确实是正确的，除了iPad的最大宽度是错误的。它应该是768px：

/* For ipad: */ 
@media screen and (max-width : 768px){}

来源

2014-05-12 15:11:26 Seano

我把答案从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)

来源

2015-01-13 15:29:13

媒体查询目标iphone/mobile/ipad

回答

相关问题