针对 iphone/mobile/ipad 的媒体查询 [英] Media query to target iphone/mobile/ipad
本文介绍了针对 iphone/mobile/ipad 的媒体查询的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用媒体查询来定位 iphone/ipad/mobile.
I am using media query to target iphone/ipad/mobile.
我编写了以下媒体查询.
I have written the following media query.
但我的问题是,如果我在移动媒体查询中编写 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)
{
}
还添加了元标记:
<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){}
另外.更改您的元标记:
Additionally. change your meta tag:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
这篇关于针对 iphone/mobile/ipad 的媒体查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文