web-dev-qa-db-fra.com

La prise en charge de la densité cible est supprimée de WebKit.

Selon cette https://bugs.webkit.org/show_bug.cgi?id=88047 WebKit a abandonné la prise en charge de target-densitédpi à partir des paramètres de viewport. Malheureusement, la description du bogue n'indique ni la motivation du changement, ni la solution de contournement. 

Certaines pages Web qui voulaient empêcher la mise à l'échelle sur des appareils mobiles avaient la déclaration suivante de la fenêtre d'affichage:

<meta name="viewport" content="width=device-width, 
initial-scale=1.0, maximum-scale=1.0, 
user-scalable=no, target-densitydpi=device-dpi"/>

Maintenant, ce code génère une erreur dans Chrome (testé avec 21.0.1180.49 beta-m). Veuillez indiquer quel est le moyen supposé de créer une page Web sans les messages d'erreur et de conserver le même comportement qu'auparavant avec target-densitédpi = device-dpi "

google-chromewebkit
26
Juriy

Le fil de discussion de la liste de diffusion webkit-dev http://lists.webkit.org/pipermail/webkit-dev/2012-May/020847.html contient une discussion (ou au moins l'arrière-plan) de la suppression de la fonctionnalité. .

En bref, WebKit disposait de quelques moyens pour redimensionner la page lors du rendu sur un périphérique, ce qui était très déroutant (d'autant plus que chaque plate-forme s'appuyait sur sa propre approche à cet égard.)

METTRE &AGRAVE; JOUR:

Selon un commentaire sur ledit fil par Adam Barth, l'auteur du correctif mentionné,

On s'inquiète du fait que certaines applications qui utilisent Utilisent la densité cible. sont livrés avec Android, mais les gens semblent disposés à déprécier le et migrer ces applications vers d’autres mécanismes, tels que images sensibles et unités de périphérique CSS.

Comme vous pouvez le constater, les images sensibles et les unités de périphérique CSS semblent constituer les "solutions de contournement" recommandées pour l'attribut target-densitydpi fourni. En outre, un autre commentaire sur le même fil mentionnait le fait que même avec cet attribut en place, les développeurs Web devraient réimplémenter la même page d'une autre manière, pour les environnements de navigateur ne prenant pas en charge cet attribut.

Je crois que la mise en page de sous-pixel } récemment introduite constituera un autre moyen d'atténuer le problème de la suppression d'attribut.

UPDATE 2

Cet article de blog suggère une autre façon de présenter votre page pour Android Chrome. AUCUNE solution de contournement ne vous laissera automatiquement "conserver le même comportement" de vos pages. Vous devez juste les réarchiver un peu.

13
Alexander Pavlov

J'ai réalisé la même chose sur le dernier Chrome pour Android avec cette jQuery:

<meta content='user-scalable=no, initial-scale=1, width=device-width' id='viewport' name='viewport'>

var viewPortScale = 1 / window.devicePixelRatio;

$('#viewport').attr('content', 'user-scalable=no, initial-scale='+viewPortScale+', width=device-width');

Ceci définit le paramètre de balise méta de la fenêtre d'affichage à l'échelle initiale sur la bonne échelle pour 1 pixel CSS == 1 pixel de périphérique.

Vous ne pouvez pas utiliser 'width =' + screen.width car screen.width ne renvoie pas les dimensions en pixels physiques. J'ai essayé d'utiliser http://responsejs.com/labs/dimensions/ sur mon Nexus 7 sous Chrome et tous les nombres sont des pixels de la fenêtre d'affichage.

18
galatians

Je ne suis pas sûr, mais il est peut-être possible d'émuler target-densitydpi en définissant "width" dans la métabalise de viewport pour qu'il soit égal à la largeur de l'écran en pixels "physiques". Malheureusement, autant que je sache, il n’existe pas à 100% de largeur de pixel de périphérique, mais quelque chose comme

<meta name="viewport" id="metaViewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script>
if(navigator.userAgent.toLowerCase().indexOf('Android') > -1)
    document.getElementById('metaViewport').setAttribute('content', 'width='+screen.width+', initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
</script>

devrait fonctionner sur la plupart des androïdes ( James Pearce: d’abord, comprenez votre écran ).

3
Denis Ryabov

Avez-vous essayé d'ajouter minimum-scale? Malheureusement, je n'ai pas de téléphone Android, je ne peux donc pas le tester pour vous.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
1
Slevin