Selon les différents Navigateurs, les propriétés de configuration de l’affichage de l'écran ont évoluées et ne sont pas forcement compatibles.
- Chrome
- Firefox
- Safari
- IE (Internet Explorer), Edge
Sur Wikipédia, on retrouve les parts de marché des navigateurs web et sa version anglaise : Usage share of web browsers
Surement du fait, de la part croissante des smartphones (Android, iPhone), les navigateurs en têtes sont donc Chrome et Safari en 2017.
Côté résolution, à travers le graphique de gs.statcounter.com - Screen Resolution Stats Worldwide, on constate également l’augmentation des petites résolutions :
Source: StatCounter Global Stats - Screen Resolution Market Share
On retrouve également sur gs.statcounter.com, la répartition par :
- Taille de résolution : Screen Resolution Stats Worldwide, juste en France : Screen Resolution Stats France. Mondial ou Français, le podium : 360x640, 1366x786, 1920x1080
- Système d'exploitation, OS : Operating System Market Share Worldwide, juste en France : Operating System Market Share France
- La version des navigateurs : Browser Version Market Share Worldwide, juste en France : Browser Version Market Share France. Podium : Chrome pour Android, Safari iPhone/iPad.
Concernant la résolution de vos écrans selon vos devices, consultez également ces ressources intéressantes :
- Comprendre le Viewport dans le Web mobile Viewport Responsive Web Design
- A tale of two viewports (part 1) et A tale of two viewports (part 2)
- Il existe une différence formelle entre les deux paires de propriétés: document.documentElement.clientWidth/Height n'inclue pas la scrollbar, alors que window.innerWidth/Height l'inclue.
- Media queries : @media all and (max-width: 400px) {
- Firefox utilise : screen.width/height pour le device-width/height
- Chrome et Safari utilisent : documentElement.clientWidth/Height pour le width/height
- developer.mozilla.org : Utiliser la balise meta viewport pour contrôler la mise en page sur les navigateurs mobiles
- window.innerWidth
- window.screen.width
- window.orientation @Deprecated :This feature has been removed from the Web standards
- window.screen.orientation Chrome et FF : ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}. IE 11 : undefined
- Détection la résolution d'affichage de l'écran sur une page web en Javascript
- Développement Web sur Mobile
- jQuery - Les tailles et résolution du document, du body, du viewport (fenêtre visible)
- Detect Orientation Change on Mobile Devices : @media screen and (orientation:portrait) {...} @media screen and (orientation:landscape) {..}
- Pour une liste d’appareil device et résolution :
- mydevice.io : web devices capabilities, les dimensions des devices communs
- screensiz.es : Screen Sizes - Viewport Sizes and Pixel Densities for Popular Devices
- Responsive Design Testing across Mobile and Desktop Browsers - iOS, Android, OS X, Windows
- Mobile Screen Resolution Percent Market Share Worldwide (As of May 2015) Mobile Screen Resolution : 360x640
- Screen Resolution Statistics
- Website Screen Resolution Tester
320x480px pour l'iPhone 3 640x960px pour l'iPhone 4 640x1136px pour l'iPhone 5 750x1334 pour l'iPhone 6 (1080x1920 pour l'iPhone 6+) 768x1024px pour l'iPad 2 1536x2048px pour l'iPad 3, 4, Air
