iPad tarayıcısı GENİŞLİK VE YÜKSEKLİK standardı

İPad'de herhangi bir web sayfasını görüntülerken BODY için en güvenli genişlik ve yüksekliği bilen var mı? Kaydırma çubuklarından mümkün olduğunca kaçınmak istiyorum.

Teşekkürler.

Erik

Sayfanızın piksel genişliği ve yüksekliği yönlendirmeye ve belirtilmişse meta görüntü alanı etiketine bağlı olacaktır. İPad 1 tarayıcısında jquery'nin $ (window) .width () ve $ (window) .height () öğelerini çalıştırmanın sonuçları aşağıda verilmiştir.

Sayfada meta görüntü alanı etiketi olmadığında:

• Portre: 980x1208
• Manzara: 980x661

Sayfada bu iki meta etiketten biri olduğunda:

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

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1">

• Dikey: 768x946
• Manzara: 1024x690

İle <meta name="viewport" content="width=device-width">:

• Dikey: 768x946
• Manzara: 768x518

İle <meta name="viewport" content="height=device-height">:

• Dikey: 980x1024
• Manzara: 980x1024

İle <meta name="viewport" content="height=device-height,width=device-width">:

• Dikey: 768x1024
• Manzara: 768x1024

İle <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">

• Dikey: 768x1024
• Manzara: 1024x1024

İle <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">

• Dikey: 831x1024
• Manzara: 1520x1024

Bu sorunun basit bir cevabı yok. Apple'ın iPhone, iPod Touch ve iPad'lerde kullanılan mobil WebKit sürümü, sayfayı ekrana sığacak şekilde ölçeklendirecek ve bu noktada kullanıcı serbestçe yakınlaştırıp uzaklaştırabilecektir.

Bununla birlikte, sayfanızı gerekli yakınlaştırma miktarını en aza indirecek şekilde tasarlayabilirsiniz. En iyi seçeneğiniz, genişliği ve yüksekliği iPad'in düşük çözünürlüğüyle aynı yapmaktır, çünkü bunun hangi yöne yöneldiğini bilmiyorsunuz; başka bir deyişle, sayfanızı 768x768 yaparsınız, böylece ister 1024x768, ister 768x1024 yönlendirilmiş olsun, iPad'in ekranına tam olarak sığar.

Daha da önemlisi, sayfanızı baş parmaklarınızla kolayca ulaşabileceğiniz çok sayıda alana sahip büyük kontrollerle tasarlamak istersiniz - çok karmaşık ve bu nedenle çok fazla yakınlaştırma gerektiren bir 768x768 sayfayı kolayca tasarlayabilirsiniz. Bunu başarmak için, muhtemelen kontrollerinizi birkaç web sayfasına bölmek isteyeceksiniz.

Öte yandan, bu en değerli uğraş değil. Tasarlarken sayfanızı daha "parmak dostu" hale getirme fırsatları bulursanız, o zaman deneyin ... ama gerçek şu ki, iPad kullanıcıları bir şeyler elde etmek için sayfayı yakınlaştırma ve uzaklaştırma konusunda çok rahatlar çünkü çoğu web sitesinde gereklidir. Bir şey varsa, muhtemelen bu tür bir navigasyona elverişli olacak şekilde tasarlamak istersiniz.

Odaklanmak için kolayca iki kez dokunulabilen ilgili gruplanmış veriler içeren kutular oluşturun ve ilgili kontrolleri birbirine yakın tutun. iPad kullanıcıları, büyük olasılıkla, alışık oldukları yakınlaştırma ve kaydırma ile gezinmeyi kolaylaştıran bir sayfayı, daha az denetime sahip bir sayfadan daha fazla beğeneceklerdir, böylece gerek kalmaz.

Bunu deneyebilirsiniz:

    /*iPad landscape oriented styles */

    @media only screen and (device-width:768px)and (orientation:landscape){
        .yourstyle{

        }

    }

    /*iPad Portrait oriented styles */

    @media only screen and (device-width:768px)and (orientation:portrait){
        .yourstyle{

        }
    }