it-swarm.com.de

Die Unterstützung für target-densitydpi wird aus WebKit entfernt

Entsprechend dieser https://bugs.webkit.org/show_bug.cgi?id=88047 WebKit hat die Unterstützung von target-densitydpi aus den Viewport-Parametern gestrichen. Leider enthält die Fehlerbeschreibung weder die Motivation für die Änderung noch den Workaround. 

Für bestimmte Webseiten, die die Skalierung auf mobilen Geräten verhindern wollten, wurde der Viewport wie folgt deklariert:

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

Dieser Code gibt jetzt einen Fehler in Chrome aus (getestet mit 21.0.1180.49 beta-m). Bitte geben Sie an, auf welche Weise eine Webseite ohne Fehlermeldungen erstellt werden kann, und behalten Sie das gleiche Verhalten wie zuvor bei target-densitydpi = device-dpi bei.

26
Juriy

Der webkit-dev-Mailinglisten-Thread http://lists.webkit.org/pipermail/webkit-dev/2012-May/020847.html enthält eine Diskussion (oder zumindest den Hintergrund) der Feature-Entfernung.

Kurz gesagt, WebKit hatte einige Möglichkeiten zum Skalieren der Seite, wenn sie auf einem Gerät gerendert wurde, und dies war äußerst verwirrend (umso mehr, als sich jede Plattform auf einen eigenen Ansatz stützte.)

UPDATE:

Laut einem Kommentar zu diesem Thread von Adam Barth, dem erwähnten Patch-Autor,

Es gibt Bedenken, dass Target-Density-dpi von einigen Apps verwendet wird, die sind mit Android gebündelt, aber die Leute scheinen bereit zu sein, das .__ abzulehnen. Funktion, und migrieren Sie diese Apps, um andere Mechanismen zu verwenden, z. B. responsive images und CSS-Geräteeinheiten.

Wie Sie sehen, scheinen reaktionsfähige Bilder und CSS-Einheiten die empfohlenen "Problemumgehungen" für das, was das target-densitydpi-Attribut bereitstellt. Ein anderer Kommentar zu demselben Thread erwähnte auch die Tatsache, dass Webentwickler selbst bei Verwendung dieses Attributs die gleiche Seite auf andere Weise neu implementieren müssten, für Browserumgebungen, die das Attribut nicht unterstützen.

Ich glaube, das kürzlich eingeführte Subpixel-Layout wird ein weiteres Mittel zur Verringerung des Problems der Attributentfernung sein.

UPDATE 2

Dieser Blogbeitrag schlägt einen alternativen Weg zum Layout Ihrer Seite für Android Chrome vor. Es gibt KEINE Problemumgehung, durch die Sie automatisch dasselbe Verhalten Ihrer Seiten beibehalten. Sie müssen sie nur ein wenig neu gestalten.

13

Mit dem jQuery habe ich dasselbe auf dem neuesten Chrome für Android erreicht:

<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');

Dadurch wird die Meta-Tag-Einstellung des Ansichtsfensters für den anfänglichen Maßstab auf den korrekten Maßstab für 1 CSS-Pixel == 1 Gerätepixel festgelegt.

Sie können 'width =' + screen.width nicht verwenden, da screen.width die physikalischen Pixelabmessungen nicht zurückgibt. Ich habe versucht, http://responsejs.com/labs/dimensions/ auf meinem Nexus 7 in Chrome zu verwenden, und alle Zahlen sind Viewport-Pixel.

18
galatians

Ich bin nicht sicher, aber möglicherweise ist es möglich, target-densitydpi zu emulieren, indem Sie "width" in Viewport-Metatag so einstellen, dass sie der Bildschirmbreite in "physischen" Pixeln entspricht. Leider, AFAIK, gibt es keine 100% ige Möglichkeit, Pixelbreite des Geräts zu erhalten, aber so etwas

<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>

sollte auf den meisten Androiden funktionieren ( James Pearce: Zuerst den Bildschirm verstehen ).

3
Denis Ryabov

Haben Sie versucht, minimum-scale hinzuzufügen? Leider habe ich kein Android-Handy und kann es daher nicht für Sie testen.

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