Se pensi che reattivo sia semplice, mi dispiace per te figlio. Abbiamo 99 viewport, ma l'iPhone è solo uno.
-Josh Brewer, 10 marzo 2010
Una componente importante del design reattivo è creare la giusta esperienza per il dispositivo giusto. Con un miliardo di dispositivi diversi sul mercato, questo può essere un compito arduo. Abbiamo raccolto le media query che possono essere utilizzate per indirizzare i progetti per molti dispositivi standard e popolari che meritano sicuramente una lettura.
Se stai cercando un elenco completo di media query, questo repository è una buona risorsa.
Se la tua reazione a questo è: non dovresti mai basare i tuoi breakpoint sui dispositivi !! Hai un buon punto. Justin Avery ha un bel post sulle possibili insidie dell'utilizzo di punti di interruzione specifici del dispositivo. La scelta dei punti di interruzione in base al tuo design e non a dispositivi specifici è un modo intelligente di procedere. Ma a volte hai solo bisogno di un piccolo aiuto per tenere sotto controllo una situazione particolare.
Telefoni e palmari
iPhone
/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Portrait */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) ( ) /* Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) ( ) /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Portrait */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) ( ) /* Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) ( ) /* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) ( ) /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) ( ) /* ----------- iPhone 6+, 7+ and 8+ ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) ( ) /* Portrait */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) ( ) /* Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) ( ) /* ----------- iPhone X ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) ( ) /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) ( ) /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) ( )Cellulari Galaxy
/* ----------- Galaxy S3 ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) ( ) /* Portrait */ @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) ( ) /* ----------- Galaxy S4, S5 and Note 3 ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) ( ) /* Portrait */ @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) ( ) /* ----------- Galaxy S6 ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) ( ) /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) ( )Google Pixel
/* ----------- Google Pixel ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) ( ) /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) ( ) /* ----------- Google Pixel XL ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) ( ) /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) ( )Telefoni HTC
/* ----------- HTC One ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) ( ) /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) ( )Telefoni Nexus
/* ----------- Nexus 4 ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2) ( ) /* Portrait */ @media screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) ( ) /* ----------- Nexus 5 ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) ( ) /* Portrait */ @media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) ( ) /* ----------- Nexus 6 and 6P ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 4) ( ) /* Portrait */ @media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 360px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) ( )Windows Phone
/* ----------- Windows Phone ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 480px) and (device-height: 800px) ( ) /* Portrait */ @media screen and (device-width: 480px) and (device-height: 800px) and (orientation: portrait) ( ) /* Landscape */ @media screen and (device-width: 480px) and (device-height: 800px) and (orientation: landscape) ( )Compresse
iPad
/* ----------- iPad 1, 2, Mini and Air ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) ( ) /* Portrait */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) ( ) /* Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) ( ) /* ----------- iPad 3, 4 and Pro 9.7" ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Portrait */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) ( ) /* ----------- iPad Pro 10.5" ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Portrait */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 834px) and (max-device-width: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Landscape */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) ( ) /* ----------- iPad Pro 12.9" ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Portrait */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Landscape */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) ( )Tablet Galaxy
/* ----------- Galaxy Tab 2 ----------- */ /* Portrait and Landscape */ @media (min-device-width: 800px) and (max-device-width: 1280px) ( ) /* Portrait */ @media (max-device-width: 800px) and (orientation: portrait) ( ) /* Landscape */ @media (max-device-width: 1280px) and (orientation: landscape) ( ) /* ----------- Galaxy Tab S ----------- */ /* Portrait and Landscape */ @media (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Portrait */ @media (max-device-width: 800px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) ( ) /* Landscape */ @media (max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) ( )Tablet Nexus
/* ----------- Nexus 7 ----------- */ /* Portrait and Landscape */ @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) ( ) /* Portrait */ @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) ( ) /* Landscape */ @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) ( ) /* ----------- Nexus 9 ----------- */ /* Portrait and Landscape */ @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) ( ) /* Portrait */ @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) ( ) /* Landscape */ @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) ( )Kindle Fire
/* ----------- Kindle Fire HD 7" ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) ( ) /* Portrait */ @media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) ( ) /* Landscape */ @media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) ( ) /* ----------- Kindle Fire HD 8.9" ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) ( ) /* Portrait */ @media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) ( ) /* Landscape */ @media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) ( )Computer portatili
Le media query per i laptop sono un po 'un colosso. Invece di prendere di mira dispositivi specifici, prova a specificare un intervallo di dimensioni dello schermo generale, quindi a distinguere tra schermi retina e non retina.
/* ----------- Non-Retina Screens ----------- */ @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) ( ) /* ----------- Retina Screens ----------- */ @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) ( )Indossabili
Sì, ci stiamo andando. Certo, questi potrebbero non essere ancora qualificati esattamente come dispositivi "standard", ma sono divertenti da guardare.
orologio Apple
/* ----------- Apple Watch ----------- */ @media (max-device-width: 42mm) and (min-device-width: 38mm) ( )Orologio Moto 360
/* ----------- Moto 360 Watch ----------- */ @media (max-device-width: 218px) and (max-device-height: 281px) ( )