css - como - ios 11 para iphone 5

Consulta de medios para apuntar a iphone/móvil/ipad

Question

Estoy usando la consulta de medios para apuntar a iphone / ipad / mobile.

He escrito la siguiente consulta de medios.

Pero mi problema es que si escribo css en la consulta de medios del móvil ''max-device-width: 480px'' también se aplicará a iphone.

¿Estoy haciendo mal?

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

También se agregó metaetiqueta:

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

Answer 1

La respuesta de Rajnikant es la correcta, excepto que el ancho máximo del iPad es incorrecto. Debería ser 768px:

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

Answer 2

Pruebe con la siguiente consulta de medios y metaetiqueta

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

Adicionalmente. cambia tu metaetiqueta:

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

Answer 3

Tomé la respuesta de 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)