Viewport, pixel css et pourcentage du zoom

bonjour à tous,
j'essaye de comprendre un peu mieux le fonctionnement du zoom sur les navigateurs mobiles et j'aurais une question à ce propos :
pour simplifier ma question je vais prendre un exemple concret, l'iphone 5 en mode portrait. ce dernier à une définition d'écran de 640 pixels, une largeur en pixels css (device-width) de 340 pixels, et un viewport de 980 pixels.
lorsque le navigateur doit afficher une page de par exemple 1280 pixels de large sur cet écran, le % de zoom pour faire rentrer la page dans l'écran se fait à partir de quel valeur? la résolution d'écran, le viewport ou le device-width ?
si c'est par rapport au viewport, le % du zoom serait d'environ 70%
si c'est par rapport à la définition d'écran, le % du zoom serait d'environ 50%
si c'est par rapport à la valeur du device-width, le % du zoom serait d'environ 25%
de mes différentes lectures je pense avoir compris que le zoom se fait par rapport au viewport, mais j'aimerais une confirmation.
merci d'avance pour vos réponses.

Bonjour,

tresor84 a écrit :
une largeur en pixels css (device-width) de 340 pixels

C'est 320 pour être précis. Mais pour le reste c'est OK.

La réponse est une simple division de device-width / viewport.
Soit dans ton cas 320 / 980 = 0.3x environ.

Tout est (très) détaillé dans cet article :
http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Bonne lecture et bon week-end

merci pour votre réponse.

J'avais déjà lu votre article très complet, mais j'ai encore du mal a m'en faire une idée claire (je n'ai ni mobile ni tablette à ma disposition, donc je ne peux pas faire de tests, les seuls tests se passent dans mon cerveau et c'est pas évident ). Je ne sais pas si ma première question était très claire. je précise que ma question porte sur le comportement par défaut du zoom des navigateurs mobiles (je veux dire par là sans utiliser de balise pour fixer la largeur du viewport à une valeur différente de celle par défaut).
Je vais prendre plusieurs exemples pour que ma question soit plus claire :

1- Une page de 320 px de large est affiché sur un iphone 5 en mode portrait (320 pixels css et viewport de 980 px, aucune balise @viewport ni initiale scale). Que ce passe-t-il au niveau du zoom du navigateur? est-ce-que le site est zoomer (300%) pour "faire" 980 pixels, ou n'y a-t-il aucun zoom (100%)?

2- Une page de 980 px de large est affiché sur un iphone 5 en mode portrait (320 pixels css et viewport de 980 px, aucune balise @viewport ni initiale scale). Que ce passe-t-il au niveau du zoom du navigateur? est-ce-que le site est dézoomer (30%) pour "faire" 320 pixels, ou n'y a-t-il aucun dézoom (100%)?

2- Une page de 2000 px de large est affiché sur un iphone 5 en mode portrait (320 pixels css et viewport de 980 px, aucune balise @viewport ni initiale scale). Que ce passe-t-il au niveau du zoom du navigateur? Est-ce-que le site est dézoomer pour "faire" 320 pixels (15%), ou est-ce-que le site est dézoomer pour "faire" 980 pixels (50%)?

Merci d'avance.
Modifié par tresor84 (25 Mar 2014 - 07:36)

OK.

Si tu n'utilises pas de meta viewport ni de @viewport sur Safari mobile iPhone 5, il se comporte tout simplement comme s'il faisait 980px de large.

tresor84 a écrit :

1- Une page de 320 px de large est affiché sur un iphone 5 en mode portrait (320 pixels css et viewport de 980 px, aucune balise @viewport ni initiale scale). Que ce passe-t-il au niveau du zoom du navigateur? est-ce-que le site est zoomer (300%) pour "faire" 980 pixels, ou n'y a-t-il aucun zoom (100%)?

Une page, ou une image de 320px de large va occuper environ 1/3 de la fenêtre.

tresor84 a écrit :

2- Une page de 980 px de large est affiché sur un iphone 5 en mode portrait (320 pixels css et viewport de 980 px, aucune balise @viewport ni initiale scale). Que ce passe-t-il au niveau du zoom du navigateur? est-ce-que le site est dézoomer (30%) pour "faire" 320 pixels, ou n'y a-t-il aucun dézoom (100%)?

Une page, ou une image de 980px de large va occuper toute la fenêtre.

tresor84 a écrit :

2- Une page de 2000 px de large est affiché sur un iphone 5 en mode portrait (320 pixels css et viewport de 980 px, aucune balise @viewport ni initiale scale). Que ce passe-t-il au niveau du zoom du navigateur? Est-ce-que le site est dézoomer pour "faire" 320 pixels (15%), ou est-ce-que le site est dézoomer pour "faire" 980 pixels (50%)?

Une page, ou une image de 2000px de large va déborder de la fenêtre.

Le plus simple est de tester avec Opera Mobile Emulator dont la valeur de Viewport par défaut est la même que celle de Safari Mobile : http://www.opera.com/fr/developer/mobile-emulator
Modifié par Raphael (26 Mar 2014 - 08:21)

merci encore pour ta réponse.
par contre je ne comprends pas une chose :
il me semblait que quelque soit la taille de la page, le navigateur mobile zoomait ou dézoomait pour que la page rentre entièrement sur l'écran du mobile, non? je veux dire par là j'ai déjà visité sur le mobile d'un collègue des pages plus larges que 980 px (par exemple 1024 px) et la page ne débordait pas de l'écran ?
Modifié par tresor84 (16 Apr 2014 - 08:27)

Raphael a écrit :

Une page, ou une image de 2000px de large va déborder de la fenêtre.

bonjour,
je me permet de faire remonter ma question car je ne comprends pas bien votre réponse. dans votre article traitant du viewport, vous écrive :
"Pour débuter en douceur, apprenez que par défaut la taille du viewport d'un terminal mobile ne correspond ni à la taille de son écran réelle ni celle en "pixels CSS". Elle est généralement bien supérieure à la surface physique, afin de pouvoir y caler n'importe quelle page web en lui affectant un niveau de (dé)zoom."
j'en ai conclue après avoir lu cette phrase qu'un navigateur mobile allait dézoomer une page de 2000 pixels de large jusqu'à ce qu'elle rentre entièrement dans le viewport, et zoomer une page inférieure à 980 pixels jusqu'à ce qu'elle rentre entièrement dans le viewport, non? j'ai l'impression au final d'avoir mal compris votre phrase.
je précise que je parle du comportement par défaut des navigateurs. dans le cas ou ma compréhension de votre phrase soit erronée (et que donc une page de 2000 px ou encore 1280 px déborde d'un viewport de 980 px), est ce que le fait de mettre la balise :

meta name "viewport" content="width=1280"

ferait en sorte qu'une page de 1280 px ne déborde plus du viewport ?
la balise meta viewport doit-elle être complêtée dans le css par @viewport pour être sur que tous les navigateurs appliqueront la demande?
Modifié par tresor84 (16 Apr 2014 - 09:20)