css - 针对 iphone/mobile/ipad 的媒体查询

Question

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

我编写了以下媒体查询。

但我的问题是，如果我在移动设备“max-device-width : 480px”的媒体查询中编写 css，它也将适用于 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 name="viewport" content="user-scalable=no,initial-scale=1">

Answer 1

试试下面的媒体查询和元标记

/* 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 name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">