媒体查询到目标iphone / mobile / ipad [英] Media query to target iphone/mobile/ipad

问题描述

我使用媒体查询来指定iPhone / ipad / mobile。

I am using media query to target iphone/ipad/mobile.

我写了以下媒体查询。

但是我的问题是如果我写css在移动的媒体查询'max-device-width：480px'，它也将适用于iphone。

But my problem is if i write css in media query of mobile 'max-device-width : 480px' it will also apply to 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)
 {

 }

$ b b

还添加了元标记：

Also added meta tag:

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

推荐答案

尝试使用以下媒体查询和元标记

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

此外。更改元标记：

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

这篇关于媒体查询到目标iphone / mobile / ipad的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！