1485 sujets

Web Mobile et responsive web design

Width=device-width et initiale scale=1.0

bonjour,

j'aurais besoin de demander plusieurs précisions à la suite de la lecture de cet article très intéressant :

http://blog.goetter.fr/articles/adieu-width-device-width/

1- utiliser juste initiale scale =1 (donc sans width=device-width) me semblait aussi la chose la plus logique et la plus efficace. malheureusement il semble au final que ce ne soit pas souhaitable suite à des bugs, mais l'article ne détaille pas quels sont les éventuels problèmes à utiliser uniquement initiale scale. y-a-t-il toujours un soucis à l'heure actuelle à n'utiliser que initiale scale ?
le soucis qui me viendrait à l'esprit serait celui-ci :
avec apple, tout va bien car avec initial-scale=1.0 dans la meta viewport, le viewport prend automatiquement la valeur des pixels css.
est-ce-qu'avec d'autres périphériques il pourrait y avoir un soucis du style :
avec juste initiale scale =1 dans la meta viewport, le viewport reste à sa valeur par défaut (valeur bien plus grande que les pixels css) ?
si oui effectivement ce serait un problème.

2- si on met juste width=device-width, je comprends bien qu'en mode paysage avec apple çà pose un soucis esthétique puisque le site est zoomé pour faire entrer entièrement le viewport dans la place disponible qui est plus grande que le viewport. mais donc si on met width=device-width initiale scale =1, sur les apple cela veut dire qu'en mode paysage le site ne sera pas zoomé mais qu'en contre-partie il n'occupera pas toute la place disponible sur l'écran, c'est bien celà?

merci à tous pour vos réponses.
Modifié par tresor84 (02 May 2014 - 08:50)
Salut,

Depuis ce billet, Raphaël a revu son jugement.

La préconisation actuelle ? Utiliser les deux, mon capitaine. Smiley cligne
Merci pour votre réponse. je me demande justement pourquoi utiliser uniquement initiale scale = 1 pose un soucis ?
Modifié par tresor84 (03 May 2014 - 10:33)
je pense avoir trouvé des précisions sur cette page :

http://www.quirksmode.org/mobile/metaviewport/

il est expliqué sur cette page le soucis de width=device-width avec les apple, mais aussi le soucis de initilale scale = 1 avec IE. si j'ai bien compris l'article pour résumer, le fait d'additioner width=device-width et initiale scale = 1 règle le soucis à la fois pour les apple et pour IE. ce que je ne comprenait pas à la base c'était l'idée d'additioner deux règles qui se révèlaient contradictoires dans le cas des apples. En fait après la lecture de l'article j'ai compris que les navigateurs n'appliquent pas les deux règles, mais qu'ils prennent comme valeur la valeur la plus élevée des deux règles.
Modifié par tresor84 (03 May 2014 - 10:35)
Une question à ce propos.
Si on utilise 

<meta name="viewport" content="width=device-width,initial-scale=1.0" />


Dans le <head> du code html, est-ce qu'il reste une utilité à écrire device-width dans la feuille de style lors de l'appel des média queries ????
Merci
Modifié par EmmaGuyot (21 Jun 2014 - 02:00)
Si tu utilises la media query (min- / max-)device-width, elle ne sera pas prise en compte sur un navigateur desktop quand tu modifies la taille de sa fenêtre.

En revanche, il est utile de doubler la méta viewport par la règle CSS @viewport (avec les préfixes qui vont bien) : en dessous d'une certaine largeur d'écran, IE 10 sous Windows 8 ne tiendra pas compte de la méta viewport (qui, de toute façon, n'est pas standard).
salut,
et pour Android ? Je crois que tu auras des problèmes lors du passage du mode paysage au mode portrait (en utilisant les deux) ou le contraire, je ne me rappel plus.
Victor BRITO a écrit :
Si tu utilises la media query (min- / max-)device-width, elle ne sera pas prise en compte sur un navigateur desktop quand tu modifies la taille de sa fenêtre.

En revanche, il est utile de doubler la méta viewport par la règle CSS @viewport (avec les préfixes qui vont bien) : en dessous d'une certaine largeur d'écran, IE 10 sous Windows 8 ne tiendra pas compte de la méta viewport (qui, de toute façon, n'est pas standard).



Merci pour ta réponse.
En passant, je viens de voir qu'un morceau de mon message a disparu quand je l'ai édité la dernière fois.
En fait ma question c'était :

"Dans le <head> du code html, est-ce qu'il reste une utilité à écrire width=device-width alors qu'on peut l'utiliser dans la feuille de style lors de l'appel des média queries ?"

Voilà c'est un peu plus clair comme ça lol.

En gros, je ne comprends pas bien pourquoi on continue d'utiliser cette meta viewport dans le <head> parcequ'elle semble n'avoir aucun effet. Ou alors je comprends pas à quoi elle est sensée servir. (??)
Par exemple, sur mon projet actuel, j'avais mis cette fameuse ligne dans mon <head> parceque j'ai vu un peu partout que c'était une bonne pratique à suivre, et que si je mettais pas ça, les media queries que j'allais utiliser par la suite seraient faussées à cause des densités différentes.

Donc ok j'utilise ma ligne, et dans mes media query je mets les points de ruptures sur du width. Je pensais que du coup, le width serait le device-width que j'avais défini dans la meta viewport. J'ai peut-être mal pigé ce que c'était sensé faire hein lol
Eh bien sur mon écran desktop, quand je réduis la fenêtre mon site est responsive.
Du coup elle fait quoi la meta viewport ?

Un peu plus tard je lis plein d'articles et je vois que des autres dev utilisent "device-width" pour créer leurs points de rupture. D'où mon questionnement sur la meta viewport. En plus tu me dis qu'elle n'est pas standard ? Du coup pourquoi on la met ? Qu'est ce qu'elle change ?
Vraiment je ne comprends pas à quoi elle sert du coup.

Si je l'enlève, ça change rien.

Également, tu me parles d'une règle CSS @viewport, qu'est ce que c'est ?

/// Au niveau CSS, il pourrait être intéressant de doubler non ? Avoir ET la media query width (pour l'écran desktop) ET la media query device-width pour les devices plus petits. C'est exactement ce que je cherche depuis plusieurs semaines. Une media query qui m'éviterait de faire de l'UA sniffing ! LOL
Modifié par EmmaGuyot (24 Jun 2014 - 00:19)
Sujet clos
Aller à