Media Queries Dispositivos Móviles
En este tutorial veremos una lista de la mayoría de dispositivos y sus respectivos media queries para realizar diseños web responsive.
DISPOSITIVOS ACER
Acer Iconia Tab A100 (Vertical) Acer Iconia Tab A100 (Horizontal)@media (max-device-width: 600px)
and (orientation: portrait) {/*Aquí los estilos*/@media (max-device-width: 1024px)
and (orientation: landscape) {/*Aquí los estilos*/
Acer Iconia Tab A500 (Vertical) Acer Iconia Tab A500 (Horizontal)@media (max-device-width: 800px)
and (orientation: portrait) {/*Aquí los estilos*/}@media (max-device-width: 1280px)
and (orientation: landscape) {/*Aquí los estilos*/}
Acer Iconia Tab A501@media only screen and (max-width : 800px)
and (max-height : 1280px) {/*Aquí los estilos*/}
Acer Liquid E2@media only screen and (max-width : 360px)
and (max-height : 640px) {/*Aquí los estilos*/}
DISPOSITIVOS ALCATEL
Alcatel Smart Mini 875@media only screen and (max-width : 320px)
and (max-height : 480px) {/*Aquí los estilos*/}
Alcatel One Touch 903@media only screen and (max-width : 320px)
and (max-height : 427px) {/*Aquí los estilos*/}
Alcatel One Touch Idol X@media only screen and (max-width : 480px)
and (max-height : 800px) {/*Aquí los estilos*/}
Alcatel One Touch T10@media only screen and (max-width : 480px)
and (max-height : 800px) {/*Aquí los estilos*/}
DISPOSITIVOS APPLE
iPad 1 y 2 (Vertical y horizontal) iPad 1 y 2 (Vertical) iPad 1 y 2 (Horizontal)@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {/*Aquí los estilos*/}@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {/*Aquí los estilos*/}@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {/*Aquí los estilos*/}
iPad 3 Y 4 (Vertical y horizontal) iPad 3 Y 4 (Vertical) iPad 3 Y 4 (Horizontal)@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {/*Aquí los estilos*/}@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {/*Aquí los estilos*/}@media only screen and (min-device-width : 768px)
and (max-device-width : 1024)
and (orientation : portrait) {/*Aquí los estilos*/}
iPad mini (Vertical y horizontal) iPad mini (Vertical) iPad mini (Horizontal)@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {/*Aquí los estilos*/}@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {/*Aquí los estilos*/ }@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {/*Aquí los estilos*/}
iPad Pro 12.9″ (Vertical y horizontal) iPad Pro 12.9″ (Vertical) iPad Pro 12.9″ (Horizontal)@media only screen and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {/*Aquí los estilos*/}@media only screen and (min-device-width: 1024px)
and (max-device-width: 1024px) and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {/*Aquí los estilos*/}@media only screen and (min-device-width: 1366px)
and (max-device-width: 1366px) and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {/*Aquí los estilos*/}
iPhone 2, 3 y 4 (Vertical y horizontal) iPhone 2, 3 y 4 (Vertical) iPhone 2, 3 y 4 (Horizontal)@media only screen and (min-device-width : 320px)
and (max-device-width : 480px) {/*Aquí los estilos*/}@media only screen and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {/*Aquí los estilos*/ }@media only screen and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {/*Aquí los estilos*/}
iPhone 5 y 5s (Vertical y horizontal) iPhone 5 y 5s (Vertical) iPhone 5 y 5s (Horizontal)@media only screen and (min-device-width : 320px)
and (max-device-width : 568px) {/*Aquí los estilos*/}@media only screen and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {/*Aquí los estilos*/ }@media only screen and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {/*Aquí los estilos*/}
iPhone 6, 7 y 8 (Vertical y horizontal) iPhone 6, 7, 8 (Vertical) iPhone 6, 7 y 8 (Horizontal)@media only screen and (min-device-width : 375px)
and (max-device-width : 667px) {/*Aquí los estilos*/}@media only screen and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {/*Aquí los estilos*/ }@media only screen and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {/*Aquí los estilos*/}
iPhone 6, 7, y 8 Plus (Vertical y horizontal) iPhone 6, 7 y 8 Plus (Vertical) iPhone 6, 7 y 8 Plus (Horizontal)@media only screen and (min-device-width : 414px)
and (max-device-width : 736px) {/*Aquí los estilos*/}@media only screen and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) {/*Aquí los estilos*/ }@media only screen and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) {/*Aquí los estilos*/}
iPhone X (Vertical y horizontal iPhone X (Vertical) iPhone X (Horizontal)@media only screen and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3) {/*Aquí los estilos*/}@media only screen and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) {/*Aquí los estilos*/}@media only screen and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) {/*Aquí los estilos*/}
DISPOSITIVOS ASUS
Asus Nexus 7 (Vertical y horizontal) Asus Nexus 7 (Vertical) Asus Nexus 7 (Horizontal)@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) {/*Aquí los estilos*/}
@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)
and (orientation: portrait) {/*Aquí los estilos*/}
@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)
and (orientation: landscape) {/*Aquí los estilos*/}
Asus Nexus 9 (Vertical y horizontal) Asus Nexus 9 (Vertical) Asus Nexus 9 (Horizontal)@media screen and (device-width: 1536px)
and (device-height: 2048px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {/*Aquí los estilos*/}@media screen and (device-width: 1536px)
and (device-height: 2048px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {/*Aquí los estilos*/}@media screen and (device-width: 1536px)
and (device-height: 2048px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {/*Aquí los estilos*/}
DISPOSITIVOS HTC
HTC One (Vertical y horizontal) HTC One (Vertical) HTC One (Horizontal)@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {/*Aquí los estilos*/}
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {/*Aquí los estilos*/}
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {/*Aquí los estilos*/}
HTC One Mini@media only screen and (max-width : 360px)
and (max-height : 640px) {/*Aquí los estilos*/}
HTC One A9@media only screen and (max-width : 1080px)
and (max-height : 1920px) {/*Aquí los estilos*/}
HTC 10@media only screen and (max-width : 1440px)
and (max-height : 2560px) {/*Aquí los estilos*/}
DISPOSITIVOS KINDLE
Kindle Fire Hd 7″ (Vertical y horizontal) Kindle Fire Hd 7″ (Vertical) Kindle Fire Hd 7″ (Horizontal)@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {/*Aquí los estilos*/}
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {/*Aquí los estilos*/}
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {/*Aquí los estilos*/}
Kindle Fire Hd 8.9″ (Vertical y horizontal) Kindle Fire Hd 8.9″ (Vertical) Kindle Fire Hd 8.9″ (Horizontal)@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {/*Aquí los estilos*/}
@media only screen and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {/*Aquí los estilos*/}
@media only screen and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {/*Aquí los estilos*/}
DISPOSITIVOS LENOVO
Lenovo IdeaPad K1 (Vertical) Lenovo IdeaPad K1 (Horizontal)@media (max-device-width: 800px)
and (orientation: portrait) {/*Aquí los estilos*/}
@media (max-device-width: 1280px)
and (orientation: landscape) {/*Aquí los estilos*/}
Lenovo IdeaTab A1000@media only screen and (max-width : 600px)
and (max-height : 1024px) {/*Aquí los estilos*/}
Lenovo IdeaTab S6000@media only screen and (max-width : 800px)
and (max-height : 1280px) {/*Aquí los estilos*/}
Lenovo Yoga Tablet 10@media only screen and (max-width : 800px)
and (max-height : 1280px) {/*Aquí los estilos*/}
Lenovo Yoga Tablet 8@media only screen and (max-width : 602px)
and (max-height : 962px) {/*Aquí los estilos*/}
DISPOSITIVOS LG
Lg G5@media only screen and (max-width : 1440px)
and (max-height : 2560px) {/*Aquí los estilos*/}
Lg Optimus 2x@media only screen and (max-width : 320px)
and (max-height : 533px) {/*Aquí los estilos*/}
Lg Optimus Black P970@media only screen and (max-width : 320px)
and (max-height : 533px) {/*Aquí los estilos*/}
Lg Optimus L7@media only screen and (max-width : 320px)
and (max-height : 533px) {/*Aquí los estilos*/}
Lg Optimus L9 P760@media only screen and (max-width : 360px)
and (max-height : 640px) {/*Aquí los estilos*/}
Lg Optimus Pad V900@media only screen and (max-width : 768px)
and (max-height : 1280px) {/*Aquí los estilos*/}
DISPOSITIVOS SAMSUNG
Galaxy S2@media screen and (device-width: 320px)
and (device-height: 533px)
and (-webkit-device-pixel-ratio: 1.5) {/*Aquí los estilos*/}
Galaxy S3 (Vertical y horizontal) Galaxy S3 (Vertical) Galaxy S3 (Horizontal)@media screen and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {/*Aquí los estilos*/}@media screen and (device-width: 320px)
and (device-height: 640px) and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {/*Aquí los estilos*/}@media screen and (device-width: 320px)
and (device-height: 640px) and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {/*Aquí los estilos*/}
Galaxy Note 2@media only screen and (max-width : 360px)
and (max-height : 640px) {/*Aquí los estilos*/}
Galaxy S4, S5 y Note3 (Vertical y horizontal) Galaxy S4, S5 y Note 3 (Vertical) Galaxy S4, S5 y Note3 (Horizontal)@media screen and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {/*Aquí los estilos*/}@media screen and (device-width: 320px)
and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {/*Aquí los estilos*/}@media screen and (device-width: 320px)
and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {/*Aquí los estilos*/}
Galaxy S6 (Vertical y horizontal) Galaxy S6 (Vertical) Galaxy S6 (Horizontal)@media screen and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4) {/*Aquí los estilos*/}@media screen and (device-width: 360px)
and (device-height: 640px) and (-webkit-device-pixel-ratio: 4)
and (orientation: portrait) {/*Aquí los estilos*/}@media screen and (device-width: 360px)
and (device-height: 640px) and (-webkit-device-pixel-ratio: 4)
and (orientation: landscape) {/*Aquí los estilos*/}
Galaxy S6 Edge @media only screen and (max-width: 1440px)
and (max-height: 2560px) {/*Aquí los estilos*/}
Galaxy S7 Y S7 Edge @media only screen and (max-width: 1440px)
and (max-height: 2560px) {/*Aquí los estilos*/}
Galaxy Note 8 N5100@media only screen and (max-width : 601px)
and (max-height : 962px) {/*Aquí los estilos*/}
Galaxy Note 8 N5110@media only screen and (max-width : 601px)
and (max-height : 962px) {/*Aquí los estilos*/}
Galaxy Tab 10.1 (Vertical y horizontal) Galaxy Tab 10.1 (Vertical) Galaxy Tab 10.1 (Horizontal)@media (min-device-width: 800px)
and (max-device-width: 1280px) {/*Aquí los estilos*/}@media (max-device-width: 800px)
and (orientation: portrait) {/*Aquí los estilos*/}@media (max-device-width: 1280px)
and (orientation: landscape) {/*Aquí los estilos*/}
Galaxi Tab 2 (Vertical y horizontal) Galaxy Tab 2 (Vertical) Galaxy Tab 2 (Horizontal)@media (min-device-width: 800px)
and (max-device-width: 1280px) {/*Aquí los estilos*/}@media (max-device-width: 800px)
and (orientation: portrait) {/*Aquí los estilos*/}
@media (max-device-width: 1280px)
and (orientation: landscape) {/*Aquí los estilos*/}
Galaxi Tab 3 10.1 P5210@media only screen and (max-width : 800px)
and (max-height : 1280px) {/*Aquí los estilos*/}
Galaxi Tab 3 7.0 T210@media only screen and (max-width : 600px)
and (max-height : 1024px) {/*Aquí los estilos*/}
Galaxy Tab 5 (Vertical y horizontal) Galaxy Tab 5 (Vertical) Galaxy Tab 5 (Horizontal)@media (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 2) {/*Aquí los estilos*/}@media (max-device-width: 800px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {/*Aquí los estilos*/}@media (max-device-width: 1280px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {/*Aquí los estilos*/}
DISPOSITIVOS SONY
Sony Xperia Z5@media only screen and (max-width: 1080px)
and (max-height: 1280px) {/*Aquí los estilos*/}
Sony Xperia Z5 Premium@media only screen and (max-width: 2160px)
and (max-height: 3840px) {/*Aquí los estilos*/}
Sony Xperia Tablet Z@media only screen and (max-width : 800px)
and (max-height : 1280px) {/*Aquí los estilos*/}
SMARTWATCHES
Apple Watch@media (max-device-width: 42mm)
and (min-device-width: 38mm) {/*Aquí los estilos*/}
Moto 360@media (max-device-width: 218px)
and (max-device-height: 281px) {/*Aquí los estilos*/}
Si te ha gustado no olvides compartir en redes sociales.
[addthis tool=»addthis_inline_share_toolbox_6jt6″]
Espero que te haya servido. Cualquier duda deja un comentario. Un saludo