Détection la résolution d'affichage de l'écran sur une page web en Javascript
Par PlaceOweb le lundi, mars 29 2010, 03:16 - Javascript - Lien permanent
Comment détecter la résolution d'un écran depuis une page web ?
Pour connaître la résolution de l'écran utilisé lors de l'affichage d'une page web, il faut utiliser les propriétés Javascript :
- screen.width (largeur)
- screen.height (hauteur)
Si vous souhaitez connaitre cette résolution côté serveur (par exemple PHP), il faudra rediriger vos client sur une 2eme page en passant les paramètres, c'est ce que propose commentcamarche.net
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Résolution</title>
</head>
<body>
<?php
if(!isset($_GET['r']))
{
echo "<script language=\"javascript\">
<!--
document.location=\"$PHP_SELF?r=1&Largeur=\"+screen.width+\"&Hauteur=\"+screen.height;
//-->
</script>";
}
else {
// Code à afficher en cas de détection de la résolution d'affichage
if(isset($_GET['Largeur']) && isset($_GET['Hauteur'])) {
// Résolution détectée
}
else {
// Résolution non détectée
}
?>
<script type="text/javascript">
<!--
alert('Votre résolution est de '+screen.width+'x'+screen.height);
document.write('<br>Votre résolution est de '+screen.width+'x'+screen.height);
//-->
</script>
<?php
}
?>
</body>
</html>
Mobiles, smartphones
HTC Desire A8181
- Navigateur par defaut :
- HTTP_USER_AGENT : Mozilla/5.0 (Linux; U; Android 2.2; fr-fr; Desire_A8181 Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
- HTTP_X_WAP_PROFILE : http://www.htcmms.com.tw/Android/Co... <prf:ScreenSize>480x800</prf:ScreenSize>
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> : NON (pas supporté, ne fonctionne pas, ignoré)
- "window.DeviceOrientationEvent" : NON
iPhone
- Navigateur par defaut :
- HTTP_USER_AGENT : Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> : OUI (géré, supporté et fonctionnel)
- "window.DeviceOrientationEvent" : OUI (géré, supporté et fonctionnel)
Viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
- Get Viewport size with Javascript
- Using the viewport meta tag to control layout on mobile browsers
- The Holy Grail of Mobile Layout
- A tale of two viewports — part one (desktop browsers) A tale of two viewports — part two (mobile browsers)
Scale
Orientation (et déplacement)
Rotation de l'écran et redimensionnement
- detect orientation change using javascript
- Detect rotation of Android phone in the browser with javascript selon les navigateurs, les événements sont appelés dans des ordres différents : resize, orientationchange
|==============================================================================| | Device | Events Fired | orientation | innerWidth | screen.width | |==============================================================================| | iPad 2 | resize | 0 | 1024 | 768 | | (to landscape) | orientationchange | 90 | 1024 | 768 | |----------------+-------------------+-------------+------------+--------------| | iPad 2 | resize | 90 | 768 | 768 | | (to portrait) | orientationchange | 0 | 768 | 768 | |----------------+-------------------+-------------+------------+--------------| | iPhone 4 | resize | 0 | 480 | 320 | | (to landscape) | orientationchange | 90 | 480 | 320 | |----------------+-------------------+-------------+------------+--------------| | iPhone 4 | resize | 90 | 320 | 320 | | (to portrait) | orientationchange | 0 | 320 | 320 | |----------------+-------------------+-------------+------------+--------------| | Droid phone | orientationchange | 90 | 320 | 320 | | (to landscape) | resize | 90 | 569 | 569 | |----------------+-------------------+-------------+------------+--------------| | Droid phone | orientationchange | 0 | 569 | 569 | | (to portrait) | resize | 0 | 320 | 320 | |----------------+-------------------+-------------+------------+--------------| | Samsung Galaxy | orientationchange | 0 | 400 | 400 | | Tablet | orientationchange | 90 | 400 | 400 | | (to landscape) | orientationchange | 90 | 400 | 400 | | | resize | 90 | 683 | 683 | | | orientationchange | 90 | 683 | 683 | |----------------+-------------------+-------------+------------+--------------| | Samsung Galaxy | orientationchange | 90 | 683 | 683 | | Tablet | orientationchange | 0 | 683 | 683 | | (to portrait) | orientationchange | 0 | 683 | 683 | | | resize | 0 | 400 | 400 | | | orientationchange | 0 | 400 | 400 | |----------------+-------------------+-------------+------------+--------------|
orientation :
- -90 à gauche vers paysage (landscape)
- 0 portait (portrait)
- 90 à droite vers paysage (landscape)
- est ce que le 180 existe sur les smartphone (pas sur HTC Desire, ni iPhone) ou uniquement tablettes ? (portrait à l'envers)
Changes to the visual viewport are a problem. I tested orientationchange, zoom, and showing and hiding the browser bar and the software keyboard. All these actions change the dimensions of the visual viewport.
- Only Opera Mobile, Android up to 2.3 and BlackBerry fire a resize event in all these cases. Palm fires the resize event in none of these cases. They, at least, are consistent.
- Dolfin and likely Symbian always fires the resize event, except on zoom.
- MeeGo fires the resize event onorientationchange and when the keyboard pops up.
- Safari and Firefox fire the resize event only onorientationchange
NOTE : En gros, sous Android Webkit, à l'utilisation du déclencheur sur l'event "orientationchange" il faut ajouter un setTimeout avant de consulter les nouvelles informations de résolutions, car à l'inverse de sous iPhone, l'événement "orientationchange" est appelé avant "resize".