PlaceOweb Dotclear

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

The Document Object Model (DOM) de Daniel Smith