0

メディアクエリを使用して、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">
4

3 に答える 3

11

以下のメディアクエリとメタタグを試してください

/* 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">
于 2013-10-03T11:03:08.310 に答える
1

iPadの最大幅が間違っていることを除けば、Rajnikantの答えは確かに正しいものです。768px である必要があります。

/* For ipad: */
@media screen and (max-width : 768px){}
于 2014-05-12T15:11:26.607 に答える
0

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-13T15:29:13.040 に答える