Device = apple
test 1: sans viewport
Résultat: width:auto =~ 960px, width:100% = 1000px
Conclusion: si tout est plus <= 960px, affiche 960px, sinon agrandit jusqu'à 1000px.
note: si 1800px, le auto =~ 960px mais le width: 950px;
test 2: avec viewport
Résultat: width:auto =~ 305px. width:100% = 475px
Conclusion: si tout est plus <= 305, alors affiche 305px, sinon agrandit à 475px.
note: si 1800px, le auto =~ 305px, width: 550px
test 3 sans viewport, Rotation 90%
Résultat: width:auto = ~960px, width: 1800px;
test 4 avec viewport, Rotation 90%
si 1800px, le auto =~ 305px, width: 650px;
http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
portrait
- largeur: 320px
- hauteur: 480-20-60-44 = 356px
hauteur+60 si barre d'adresse non visible
paysage
- largeur: 480px
- hauteur: ? = 208px
hauteur+60 si barre d'adresse non visible
default width: 980px; (without viewport)
viewport: 320px, scale =1.0
viewport: 320px, scale =1.5
viewport: 320px, scale =0.5
For example, to specify a style sheet for iPhone and iPod touch, use an expression similar to the following:
To specify a style sheet for devices other than iOS, use an expression similar to the following:
@media screen and (max-device-width: 481px) { ... }
@media screen and (min-device-width: 481px) { ... }
@media screen {
#text { color: white; background-color: black; }
}
@media print {
#text { color: black; background-color: white; }
#nav { display: none; }
}
html {-webkit-text-size-adjust:none}
apple-touch-icon-precomposed.png -> no effect
ville de mont-laurier
radio-canada:
http://www.journallecourant.com/nouvelles/?mobile=1