Les mêmes technologies pour servir tous ces besoins
(mais aussi, orientation)
1px=0.75pt
1pt=1/72in
1em=14/16px
(fixé par font-size
)cm
et le px
!)1cm CSS = 1cm réel
)Pour un smartphone, si cette définition est bien suivie :
viewport
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Forcer la largeur du viewport</title>
<meta name="viewport" content="width=418,initial-scale=1.0" />
</head>
<body>[…]</body>
</html>
<meta name="viewport"
content="width=device-width,initial-scale=1.0" />
@viewport { }
en CSSLes requêtes de média CSS permettent de n’appliquer des règles CSS qu’aux navigateurs remplissant certains critères :
width
: largeur de la fenêtre d’affichagedevice-width
: largeur de l’écranheight
: hauteur de la fenêtre d’affichagedevice-height
: hauteur de l’écranaspect-ratio
: width / heightorientation
: portrait ou paysageLes propriétés numériques se préfixent avec min-
et max-
.
max-width: 100%
click
, mousedown
, etc. ⇒ événements touchstart
, touchmove
, touchend
:hover
impossibleRéduire / optimiser les entrées de texte
<input type=tel>
<input type=email>
<input type=date>
<input type=range>
<datalist><option value=…></datalist>
Bientôt (?):
<input type='text' speech>
navigator.geolocation.getCurrentPosition()
window.addEventListener("devicemotion", callback, false)
navigator.getUserMedia()
navigator.geolocation.getCurrentPosition()
if (navigator.geolocation &&
navigator.geolocation.getCurrentPosition()) { … }
<label>Position actuelle :
<input name='position'></label>
navigator.onLine
, window.addEventListener('online', …)
navigator.connection.type
var battery = new BatteryStatusEventSource();
battery.addEventListener('batterylow', …);
navigator.useragent
User-Agent
qui identifie le navigateur (mais pas uniquement)X-WAP-Profile
qui identifie le terminal (mais pas uniquement)Accept-*
(Accept
, Accept-Charset
, Accept-Encoding
, Accept-Language
) qui précisent certains paramètres du navigateurAdaptation basée sur Accept-*
Sous Apache :
Options +MultiViews
En supposant la requête suivante :
GET /img HTTP/1.1
Host: example.com
Accept: text/html,image/png,image/jpeg;q=0.8
[…]
Le serveur cherche img.png
, puis img.jpg
dans le répertoire demandé.
User-Agent
Les chaines User-Agent
:
Il y a des dizaines de milliers de possibilités.
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} "android" [NC]
RewriteRule ^/$ /index-android.html [L]
RewriteRule ^/$ /index.html [L]
Header merge vary "User-Agent"
Les bases de decription de terminaux fournissent ce genre d’information (WURFL, DeviceAtlas)
Bientôt : Interfaces utilisateurs par modélisation