Meta-görünüm penceresi Ölçekleme Android haline gelmiş, Neyi kaçırıyorum?

SORU

3 ŞUBAT 2011, PERŞEMBE

Meta-görünüm penceresi Ölçekleme Android haline gelmiş, Neyi kaçırıyorum?

Görünüm penceresi -- ve -- içinde içeriğini görünüm penceresi meta etiketi ana tarayıcı ile web görünümü veya içeriği çizim için kullanılan nasıl etkilendiğini belirlemek için çalışıyorlar.

Koş ettiğim bazı belirgin tutarsızlıklar vardır. Görsel olarak görüntü Ölçekleme gibi, tam rakam verebilirim çok küçük bir sayfa (aşağıya bakınız) bir görüntü ve görünüm alanı boyutunu göstermek için bazı javascript ile oluşturdum.

İlk olarak, bazı gözlemler:

Görünüm penceresi genişliği numaralarını kimse, sadece yakın tam olarak beklediğim gibi.
Sayıları aygıt piksel sayısı yakın olduğunda, çizim aslında bir-için-bir-ya da en azından gözle görülür bir şekilde böyle görünüyor.
Eğer sayfa boyutu (belge boyutu) görüntü kutusu boyutu altında ise, görüntü kutusu numaraları küçültmek. Bu görüş her zaman mutlaka mümkün olan maksimum görünür alanı mevcut görünür boşluk sadece ... temsil etmiyor.
Aynı şekilde, yerel tarayıcı penceresi boyutu üst bar tarafından ayarlanır. Boyutu ekrandan kayarak olarak artar. Numaraları verilen tam ekran görüntüleme.

Cihaz #1: Fiziksel ekran 1024x600 ve çalışıyor Android 2.2.

ilk-scale=1.0 =>676x400
ilk-scale=1.0, genişlik=cihaz genişliği =>676x400
ilk-ölçek=2, genişlik=cihaz genişliği =>338x200
ilk-ölçek=2, genişlik=cihaz genişliği, hedef-densitydpi=device-dpi =>507x300
ilk-scale=0.5, genişlik=cihaz genişliği, hedef-densitydpi=device-dpi =>800x473
ilk-scale=0.9, genişlik=cihaz genişliği, hedef-densitydpi=device-dpi =>800x473
genişlik=cihaz genişliği, hedef-densitydpi=device-dpi =>1014x600
ilk-scale=1.0, genişlik=cihaz genişliği, hedef-densitydpi=device-dpi =>1014x600
ilk-scale=0.5, genişlik=cihaz genişliği, hedef-densitydpi=device-dpi, minimum-scale=0.1 =>2028x768
ilk-scale=0.5, genişlik=cihaz genişliği, hedef-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no => 1014x600

Cihaz #2: Fiziksel ekran 800 x 480 ve çalışıyor Android 2.3.2.

ilk-scale=1.0 =>527x320
ilk-scale=1.0, genişlik=cihaz genişliği =>527x320
ilk-ölçek=2, genişlik=cihaz genişliği =>263x160
ilk-ölçek=2, genişlik=cihaz genişliği, hedef-densitydpi=device-dpi =>395x240
ilk-scale=0.5, genişlik=cihaz genişliği, hedef-densitydpi=device-dpi =>790x480
ilk-scale=1.0, genişlik=cihaz genişliği, hedef-densitydpi=device-dpi =>790x480
ilk-scale=0.5, genişlik=cihaz genişliği, hedef-densitydpi=device-dpi, minimum-scale=0.1 =>1580x768
ilk-scale=0.5, genişlik=cihaz genişliği, hedef-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no => 790x480
genişlik=1580, hedef-densitydpi=device-dpi => 790x480
genişlik=1580, hedef-densitydpi=device-dpi => 790x480
genişlik=1580, hedef-densitydpi=device-dpi, minimum-scale=0.1 =>790x480

Bu sonuçlar, aşağıdaki mantıklı değil:

Cihaz #1, öğe 5, 6, ve 10
Cihaz #2, öğeler 5, 8, 10, 11, 12

Kimseye anlam ifade etmeyen o neler olduğunu biliyor mu?

Kimseye çoğu değerleri 10 piksel fiziksel piksel maçın utangaç, ama neden bunlar aynı gibi neden biliyor mu? (örneğin; 1.7 ve 2.6)

Ben yanlış bir şey yapıyorum, ya da imkansız kullanıcı ayrıca ölçek için izin verilir ve minimum ölçek değerini ayarlamak sürece 1.0 ötesinde uzaklaştırmak için böyle görünüyor?

Bu, geçerli değerler 10, ilk ölçek 0.01 olsa bile 1.0 altında değerler de en az bir ölçek ayarlayabilirsiniz sürece göz ardı edilir.

Android docs do user-scalable min/max skala değerleri dikkate alınmaz hiçbir zaman söylüyorlar. Bu çok yararlı görünmüyor. Ve 2.9-2.11 sadece Kendin hesaplayamazsın gösteriyor gibi görünüyor ve genişliği ayarlayın.

Son olarak, HTML ben kullanıyorum:

<html>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<head>
    <meta name="viewport" content="initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no" />
</head>
<body style="margin:0;">
<div id="bld" class="bld" style="position:absolute; width:250px; height:125px; left:50px; background-color:#ccccff;">Hello world.</div>
<img id="bl1" src="http://commondatastorage.googleapis.com/kf6nvr/images/1024x768.png" />
<script> 
$("#bl1").click(function(){
    var pageWidth = $(document).width();
    var pageHeight = $(document).height();
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();

     $("#bld").html("Page width: " pageWidth "<br />pageHeight: " pageHeight "<br />port width: " viewportWidth "<br />port height: " viewportHeight);
});
</script> 
</body>
</html>

Yani... neyi kaçırıyorum?

CEVAP

11 NİSAN 2011, PAZARTESİ

Orada açtın solucan ilginç olabilir. Daha fazla cihazlar çalışırken muhtemelen daha bir çok gariplik ve rastgele hatalar göreceksiniz. İlginç zamanlar! :-)

Bir yere satır aşağı vazgeçip, denemek isteyebileceğiniz... şüpheliyim

Mümkün olduğunca basit ayarları ile sopa.
Cihaz raporu için seçtiği genişliği piksel kabul edin.
/Akışkan düzeni ve göreceli genişlikleri adaptif şeyler farklı ekran genişliği arasında iş yapmak için kullanır.
Yuvarlak köşeler, gölgeler ve geçişlerini çözünürlük tarafsız bir render için yerli CSS özelliklerini kullanın.
Vektör biçimleri (svg, simge yazı tipleri, vb.) kullanın mümkün olduğunca
ve (önemliYüksek çözünürlüklü border-imageler gibi background-images ile birleştiğinde iyi desteklenen *11.* ^sup>1şeyler işlemek güzel ve net olun².

¹⁾background-image çift bildirimleri kullanmanız gerekir eski tarayıcılar (MSİE8 gibi) geriye doğru uyumluluk sağlamak gibi

background-image: url(low-res.png);        /* CSS2 */
background-image: url(high-res.png), none; /* CSS3 */
background-size:  100px 10px;             /* CSS3 */

²⁾-webkit-max-device-pixel-ratio ortam sorgusu da yardımcı olabilir, ama adından da anlaşılacağı gibi sadece y tarayıcılar için çalışır.

Ramble:

Yeni nesil CSS pixels yerine gerçek aygıt piksel raporlama yoluna gittiler Android ve cihazlardan farklı ekran DPİs var iOS. Bu hem iyi ya da kötü - nasıl baktığınıza bağlı.

kötüartık aşağı-to-device-pixel kontrolü garantili değilsin çünkü sahip olmak, eskiden çoğunlukla homojen ekranlar ile çalışmak için kullanıldı.

Öte yandaniyiTasarımlarınız asla sıradan insanlar tarafından kullanılan okuma/olamaz o kadar küçük hale getirecek, çünkü biliyorsun.

target-densitydpi=device-dpi kullanarak sorunu çalışır iken 800px 7 inç genişliğinde bir ekran üzerinde mucizeler, tamamen 4inch geniş 960px ekranda uygulama berbat olacak.

Bunu Paylaş: