¿Cuáles serían las CSS media querys de todos los dispositivos móviles actuales?
Hola, me gustaría que me indicasen cuáles serían las media querys de CSS para controlar todos los dispositivos móviles. Gracias.
1 Respuesta(s)
Hola kalan.
Te dejo por aquí de casi todos los dispositivos móviles de Apple:
iPAD
/****iPad en portrait & landscape****/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* CÓDIGOS CSS AQUÍ */ } /****iPad en landscape****/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* CÓDIGOS CSS AQUÍ */ } /****iPad en portrait****/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* CÓDIGOS CSS AQUÍ */ }
iPad 3 & 4
/****Retina iPad en portrait & landscape****/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) { /* CÓDIGOS CSS AQUÍ */ } /****Retina iPad en landscape****/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) { /* CÓDIGOS CSS AQUÍ */ } /****Retina iPad en portrait****/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) { /* CÓDIGOS CSS AQUÍ */ }
iPad 1 & 2
/****iPad 1 & 2 en portrait & landscape****/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){ /* CÓDIGOS CSS AQUÍ */ } /****iPad 1 & 2 en landscape****/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { /* CÓDIGOS CSS AQUÍ */ } /****iPad 1 & 2 en portrait****/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) { /* CÓDIGOS CSS AQUÍ */ }
iPAD MINI
/****iPad mini en portrait & landscape****/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) { /* CÓDIGOS CSS AQUÍ */ } /****iPad mini en landscape****/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { /* CÓDIGOS CSS AQUÍ */ } /****iPad mini en portrait****/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) { /* CÓDIGOS CSS AQUÍ */ }
iPHONE
/****iPhone 6 en portrait & landscape****/ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) { /* CÓDIGOS CSS AQUÍ */ } /****iPhone 6 en landscape****/ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) { /* CÓDIGOS CSS AQUÍ */ } /****iPhone 6 en portrait****/ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) { /* CÓDIGOS CSS AQUÍ */ } /****iPhone 6 Plus en portrait & landscape****/ @media only screen and (min-device-width : 414px) and (max-device-width : 736px) { /* CÓDIGOS CSS AQUÍ */ } /****iPhone 6 Plus en landscape****/ @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) { /* CÓDIGOS CSS AQUÍ */ } /****iPhone 6 Plus en portrait****/ @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) { /* CÓDIGOS CSS AQUÍ */ } /****iPhone 5 & 5S en portrait & landscape****/ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { /* CÓDIGOS CSS AQUÍ */ } /****iPhone 5 & 5S en landscape****/ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { /* CÓDIGOS CSS AQUÍ */ } /****iPhone 5 & 5S en portrait****/ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { /* CÓDIGOS CSS AQUÍ */ } /****iPhone 2G-4S en portrait & landscape****/ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* CÓDIGOS CSS AQUÍ */ } /****iPhone 2G-4S en landscape****/ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) { /* CÓDIGOS CSS AQUÍ */ } /****iPhone 2G-4S en portrait****/ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) { /* CÓDIGOS CSS AQUÍ */ }