Media Queries Dispositivos Móviles

Media Queries Dispositivos Móviles

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

Acer Iconia Tab A100 (Vertical)

@media (max-device-width: 600px) 
and (orientation: portrait) {/*Aquí los estilos*/

Acer Iconia Tab A100 (Horizontal)

@media (max-device-width: 1024px) 
and (orientation: landscape) {/*Aquí los estilos*/

ACER ICONIA TAB A500

Acer Iconia Tab A500 (Vertical)

@media (max-device-width: 800px) 
and (orientation: portrait) {/*Aquí los estilos*/}

Acer Iconia Tab A500 (Horizontal)

@media (max-device-width: 1280px) 
and (orientation: landscape) {/*Aquí los estilos*/}

ACER ICONIA TAB A501

Acer Iconia Tab A501

@media only screen and (max-width : 800px) 
and (max-height : 1280px) {/*Aquí los estilos*/}

ACER LIQUID E2

Acer Liquid E2

@media only screen and (max-width : 360px) 
and (max-height : 640px) {/*Aquí los estilos*/}

DISPOSITIVOS ALCATEL

ALCATEL SMART MINI 875

Alcatel Smart Mini 875

@media only screen and (max-width : 320px) 
and (max-height : 480px) {/*Aquí los estilos*/}

ALCATEL ONE TOUCH 903

Alcatel One Touch 903

@media only screen and (max-width : 320px) 
and (max-height : 427px) {/*Aquí los estilos*/}

ALCATEL ONE TOUCH IDOL X

Alcatel One Touch Idol X

@media only screen and (max-width : 480px) 
and (max-height : 800px) {/*Aquí los estilos*/}

ALCATEL ONE TOUCH T10

Alcatel One Touch T10

@media only screen and (max-width : 480px) 
and (max-height : 800px) {/*Aquí los estilos*/}

DISPOSITIVOS APPLE

IPAD 1 Y 2

iPad 1 y 2 (Vertical y horizontal)

@media only screen and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {/*Aquí los estilos*/}

iPad 1 y 2 (Vertical)

@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*/}

iPad 1 y 2 (Horizontal)

@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

iPad 3 Y 4 (Vertical y horizontal)

@media only screen and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {/*Aquí los estilos*/}

iPad 3 Y 4 (Vertical)

@media only screen and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (orientation : portrait) {/*Aquí los estilos*/}

iPad 3 Y 4 (Horizontal)

@media only screen and (min-device-width : 768px) 
and (max-device-width : 1024)
and (orientation : portrait) {/*Aquí los estilos*/}

IPAD MINI

iPad mini (Vertical y horizontal)

@media only screen and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {/*Aquí los estilos*/}

iPad mini (Vertical)

@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*/ }

iPad mini (Horizontal)

@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"

iPad Pro 12.9″ (Vertical y horizontal)

@media only screen and (min-device-width: 1024px) 
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {/*Aquí los estilos*/}

iPad Pro 12.9″ (Vertical)

@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*/}

iPad Pro 12.9″ (Horizontal)

@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

iPhone 2, 3 y 4 (Vertical y horizontal)

@media only screen and (min-device-width : 320px) 
and (max-device-width : 480px) {/*Aquí los estilos*/}

iPhone 2, 3 y 4 (Vertical)

@media only screen and (min-device-width : 320px) 
and (max-device-width : 480px)
and (orientation : portrait) {/*Aquí los estilos*/ }

iPhone 2, 3 y 4 (Horizontal)

@media only screen and (min-device-width : 320px) 
and (max-device-width : 480px)
and (orientation : landscape) {/*Aquí los estilos*/}

IPHONE 5 Y 5s

iPhone 5 y 5s (Vertical y horizontal)

@media only screen and (min-device-width : 320px) 
and (max-device-width : 568px) {/*Aquí los estilos*/}

iPhone 5 y 5s (Vertical)

@media only screen and (min-device-width : 320px) 
and (max-device-width : 568px)
and (orientation : portrait) {/*Aquí los estilos*/ }

iPhone 5 y 5s (Horizontal)

@media only screen and (min-device-width : 320px) 
and (max-device-width : 568px)
and (orientation : landscape) {/*Aquí los estilos*/}

IPHONE 6, 7 Y 8 PLUS

iPhone 6, 7 y 8 (Vertical y horizontal)

@media only screen and (min-device-width : 375px) 
and (max-device-width : 667px) {/*Aquí los estilos*/}

iPhone 6, 7, 8 (Vertical)

@media only screen and (min-device-width : 375px) 
and (max-device-width : 667px)
and (orientation : portrait) {/*Aquí los estilos*/ }

iPhone 6, 7 y 8 (Horizontal)

@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

iPhone 6, 7, y 8 Plus (Vertical y horizontal)

@media only screen and (min-device-width : 414px) 
and (max-device-width : 736px) {/*Aquí los estilos*/}

iPhone 6, 7 y 8 Plus (Vertical)

@media only screen and (min-device-width : 414px) 
and (max-device-width : 736px)
and (orientation : portrait) {/*Aquí los estilos*/ }

 

iPhone 6, 7 y 8 Plus (Horizontal)

@media only screen and (min-device-width : 414px) 
and (max-device-width : 736px)
and (orientation : landscape) {/*Aquí los estilos*/}

IPHONE X

iPhone X (Vertical y horizontal

@media only screen and (min-device-width : 375px) 
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3) {/*Aquí los estilos*/}

iPhone X (Vertical)

@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*/}

iPhone X (Horizontal)

@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

Asus Nexus 7 (Vertical y 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*/}

Asus Nexus 7 (Vertical)

@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*/}

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) 
and (orientation: landscape) {/*Aquí los estilos*/}

ASUS NEXUS 9

Asus Nexus 9 (Vertical y 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*/}

Asus Nexus 9 (Vertical)

@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*/}

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)
and (orientation: landscape) {/*Aquí los estilos*/}

DISPOSITIVOS HTC

HTC ONE

HTC One (Vertical y horizontal)

@media screen 
and (device-width: 360px) 
and (device-height: 640px) 
and (-webkit-device-pixel-ratio: 3) {/*Aquí los estilos*/}

HTC One (Vertical)

@media screen 
and (device-width: 360px) 
and (device-height: 640px) 
and (-webkit-device-pixel-ratio: 3) 
and (orientation: portrait) {/*Aquí los estilos*/}

HTC One (Horizontal)

@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

HTC One Mini

@media only screen and (max-width : 360px) 
and (max-height : 640px) {/*Aquí los estilos*/}

HTC ONE A9

HTC One A9

@media only screen and (max-width : 1080px) 
and (max-height : 1920px) {/*Aquí los estilos*/}

HTC 10

HTC 10

@media only screen and (max-width : 1440px) 
and (max-height : 2560px) {/*Aquí los estilos*/}

DISPOSITIVOS KINDLE

KINDLE FIRE HD 7

Kindle Fire Hd 7″ (Vertical y 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*/}

Kindle Fire Hd 7″ (Vertical)

@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*/}

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) 
and (orientation: landscape) {/*Aquí los estilos*/}

KINDLE FIRE HD 8.9

Kindle Fire Hd 8.9″ (Vertical y 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*/}

Kindle Fire Hd 8.9″ (Vertical)

@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*/}

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) 
and (orientation: landscape) {/*Aquí los estilos*/}

DISPOSITIVOS LENOVO

LENOVO IDEAPAD K1

Lenovo IdeaPad K1 (Vertical)

@media (max-device-width: 800px) 
and (orientation: portrait) {/*Aquí los estilos*/}

Lenovo IdeaPad K1 (Horizontal)

@media (max-device-width: 1280px) 
and (orientation: landscape) {/*Aquí los estilos*/}

LENOVO IDEATAB A1000

Lenovo IdeaTab A1000

@media only screen and (max-width : 600px) 
and (max-height : 1024px) {/*Aquí los estilos*/}

LENOVO IDEATAB S6000

Lenovo IdeaTab S6000

@media only screen and (max-width : 800px) 
and (max-height : 1280px) {/*Aquí los estilos*/}

LENOVO YOGA TABLET 10

Lenovo Yoga Tablet 10

@media only screen and (max-width : 800px) 
and (max-height : 1280px) {/*Aquí los estilos*/}

LENOVO YOGA TABLET 8

Lenovo Yoga Tablet 8

@media only screen and (max-width : 602px) 
and (max-height : 962px) {/*Aquí los estilos*/}

DISPOSITIVOS LG

LG G5

Lg G5

@media only screen and (max-width : 1440px) 
and (max-height : 2560px) {/*Aquí los estilos*/}

LG OPTIMUS 2X

Lg Optimus 2x

@media only screen and (max-width : 320px) 
and (max-height : 533px) {/*Aquí los estilos*/}

LG OPTIMUS BLACK P970

Lg Optimus Black P970

@media only screen and (max-width : 320px) 
and (max-height : 533px) {/*Aquí los estilos*/}

LG OPTIMUS L7

Lg Optimus L7

@media only screen and (max-width : 320px) 
and (max-height : 533px) {/*Aquí los estilos*/}

LG OPTIMUS L9 P760

Lg Optimus L9 P760

@media only screen and (max-width : 360px) 
and (max-height : 640px) {/*Aquí los estilos*/}

LG OPTIMUS PAD V900

Lg Optimus Pad V900

@media only screen and (max-width : 768px) 
and (max-height : 1280px) {/*Aquí los estilos*/}

DISPOSITIVOS SAMSUNG

GALAXY S2

Galaxy S2

@media screen and (device-width: 320px) 
and (device-height: 533px)
and (-webkit-device-pixel-ratio: 1.5) {/*Aquí los estilos*/}

GALAXY S3

Galaxy S3 (Vertical y horizontal)

@media screen and (device-width: 320px) 
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {/*Aquí los estilos*/}

Galaxy S3 (Vertical)

@media screen   and (device-width: 320px) 
and (device-height: 640px) and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {/*Aquí los estilos*/}

Galaxy S3 (Horizontal)

@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

Galaxy Note 2

@media only screen and (max-width : 360px) 
and (max-height : 640px) {/*Aquí los estilos*/}

GALAXY S4, S5 Y NOTE3

Galaxy S4, S5 y Note3 (Vertical y horizontal)

@media screen and (device-width: 320px) 
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {/*Aquí los estilos*/}

Galaxy S4, S5 y Note 3 (Vertical)

@media screen and (device-width: 320px) 
and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {/*Aquí los estilos*/}

Galaxy S4, S5 y Note3 (Horizontal)

@media screen and (device-width: 320px) 
and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {/*Aquí los estilos*/}

GALAXY S6

Galaxy S6 (Vertical y horizontal)

@media screen   and (device-width: 360px) 
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4) {/*Aquí los estilos*/}

Galaxy S6 (Vertical)

@media screen   and (device-width: 360px) 
and (device-height: 640px) and (-webkit-device-pixel-ratio: 4)
and (orientation: portrait) {/*Aquí los estilos*/}

Galaxy S6 (Horizontal)

@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

Galaxy S6 Edge

@media only screen and (max-width: 1440px) 
and (max-height: 2560px) {/*Aquí los estilos*/}

GALAXY S7 Y S7 EDGE

Galaxy S7 Y S7 Edge

@media only screen and (max-width: 1440px) 
and (max-height: 2560px) {/*Aquí los estilos*/}

GALAXY NOTE 8 N5100

Galaxy Note 8 N5100

@media only screen and (max-width : 601px) 
and (max-height : 962px) {/*Aquí los estilos*/}

GALAXY NOTE 8 N5110

Galaxy Note 8 N5110

@media only screen and (max-width : 601px) 
and (max-height : 962px) {/*Aquí los estilos*/}

GALAXY TAB 10.1

Galaxy Tab 10.1 (Vertical y horizontal)

@media (min-device-width: 800px)     
and (max-device-width: 1280px) {/*Aquí los estilos*/}

Galaxy Tab 10.1 (Vertical)

@media (max-device-width: 800px) 
and (orientation: portrait) {/*Aquí los estilos*/}

Galaxy Tab 10.1 (Horizontal)

@media (max-device-width: 1280px) 
and (orientation: landscape) {/*Aquí los estilos*/}

GALAXY TAB 2

Galaxi Tab 2 (Vertical y horizontal)

@media (min-device-width: 800px) 
and (max-device-width: 1280px) {/*Aquí los estilos*/}

Galaxy Tab 2 (Vertical)

@media (max-device-width: 800px) 
and (orientation: portrait) {/*Aquí los estilos*/}

Galaxy Tab 2 (Horizontal)

@media (max-device-width: 1280px) 
and (orientation: landscape) {/*Aquí los estilos*/}

GALAXY TAB 3 10.1 P5210

Galaxi Tab 3 10.1 P5210

@media only screen and (max-width : 800px) 
and (max-height : 1280px) {/*Aquí los estilos*/}

GALAXY TAB 3 7.0 T210

Galaxi Tab 3 7.0 T210

@media only screen and (max-width : 600px) 
and (max-height : 1024px) {/*Aquí los estilos*/}

GALAXY TAB 5

Galaxy Tab 5 (Vertical y horizontal)

@media (min-device-width: 800px) 
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 2) {/*Aquí los estilos*/}

Galaxy Tab 5 (Vertical)

@media (max-device-width: 800px) 
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {/*Aquí los estilos*/}

Galaxy Tab 5 (Horizontal)

@media (max-device-width: 1280px) 
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {/*Aquí los estilos*/}

DISPOSITIVOS SONY

SONY XPERIA Z5

Sony Xperia Z5

@media only screen and (max-width: 1080px) 
and (max-height: 1280px) {/*Aquí los estilos*/}

SONY XPERIA Z5 PREMIUM

Sony Xperia Z5 Premium

@media only screen and (max-width: 2160px) 
and (max-height: 3840px) {/*Aquí los estilos*/}

SONY XPERIA TABLET Z

Sony Xperia Tablet Z

@media only screen and (max-width : 800px) 
and (max-height : 1280px) {/*Aquí los estilos*/}

SMARTWATCHES

APPLE WATCH

Apple Watch

@media (max-device-width: 42mm)
and (min-device-width: 38mm) {/*Aquí los estilos*/}

MOTOROLA MOTO 360

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.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas