Browser iPad standar WIDTH & HEIGHT

Adakah yang tahu lebar dan tinggi teraman untuk BODY saat melihat halaman web mana pun di iPad? Saya ingin menghindari scrollbar sebanyak mungkin.

Terima kasih.

Erik

Lebar dan tinggi piksel halaman Anda akan bergantung pada orientasi serta tag meta viewport, jika ditentukan. Berikut adalah hasil dari menjalankan jquery $ (window) .width () dan $ (window) .height () pada browser iPad 1.

Jika halaman tidak memiliki tag meta viewport:

• Potret: 980x1208
• Lanskap: 980x661

Jika halaman memiliki salah satu dari dua tag meta berikut:

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

• Potret: 768x946
• Lanskap: 1024x690

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

• Potret: 768x946
• Lanskap: 768x518

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

• Potret: 980x1024
• Lanskap: 980x1024

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

• Potret: 768x1024
• Lanskap: 768x1024

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

• Potret: 768x1024
• Lanskap: 1024x1024

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

• Potret: 831x1024
• Lanskap: 1520x1024

Tidak ada jawaban sederhana untuk pertanyaan ini. WebKit versi seluler Apple, yang digunakan di iPhone, iPod Touches, dan iPads, akan menskalakan halaman agar sesuai dengan layar, di mana pengguna dapat memperbesar dan memperkecil dengan bebas.

Karena itu, Anda dapat mendesain halaman Anda untuk meminimalkan jumlah pembesaran yang diperlukan. Taruhan terbaik Anda adalah membuat lebar dan tinggi sama dengan resolusi yang lebih rendah dari iPad, karena Anda tidak tahu arahnya; dengan kata lain, Anda akan membuat halaman 768x768, sehingga akan pas di layar iPad apakah diorientasikan ke 1024x768 atau 768x1024.

Lebih penting lagi, Anda ingin mendesain halaman Anda dengan kontrol besar dengan banyak ruang yang mudah dijangkau dengan ibu jari Anda - Anda dapat dengan mudah mendesain halaman 768x768 yang sangat berantakan dan oleh karena itu membutuhkan banyak zoom. Untuk mencapai ini, Anda mungkin ingin membagi kontrol Anda di antara sejumlah halaman web.

Di sisi lain, ini bukanlah pengejaran yang paling berharga. Jika saat mendesain Anda menemukan peluang untuk membuat halaman Anda lebih "ramah jari", lakukanlah ... tetapi kenyataannya adalah bahwa pengguna iPad sangat nyaman dengan bergerak dan memperbesar dan memperkecil halaman untuk mendapatkan sesuatu karena itu perlu di sebagian besar situs web. Jika ada, Anda mungkin ingin mendesainnya sehingga kondusif untuk jenis navigasi ini.

Buat kotak dengan data yang dikelompokkan relevan yang bisa dengan mudah diketuk dua kali untuk fokus, dan pertahankan kontrol terkait berdekatan satu sama lain. Pengguna iPad kemungkinan besar akan menghargai halaman yang memfasilitasi navigasi zoom-and-pan yang biasa mereka lakukan lebih dari halaman yang memiliki kontrol lebih sedikit sehingga mereka tidak perlu melakukannya.

Anda dapat mencoba ini:

    /*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{

        }
    }