iPad браузер WIDTH & HEIGHT стандарт

Кто-нибудь знает самую безопасную ширину и высоту для ТЕЛА при просмотре любой веб-страницы на iPad? Я хочу как можно больше избегать полос прокрутки.

Спасибо.

Erik

Ширина и высота вашей страницы в пикселях будут зависеть от ориентации, а также от метатега области просмотра, если он указан. Вот результаты выполнения jquery $ (window) .width () и $ (window) .height () в браузере iPad 1.

Если на странице нет метатега области просмотра:

• Портрет: 980x1208
• Пейзаж: 980x661

Когда на странице есть один из этих двух метатегов:

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

• Портрет: 768x946
• Пейзаж: 1024x690

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

• Портрет: 768x946
• Пейзаж: 768x518

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

• Портрет: 980x1024
• Пейзаж: 980x1024

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

• Портрет: 768x1024
• Пейзаж: 768x1024

С участием <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">

• Портрет: 768x1024
• Пейзаж: 1024x1024

С участием <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">

• Портрет: 831x1024
• Пейзаж: 1520x1024

На этот вопрос нет однозначного ответа. Мобильная версия WebKit от Apple, используемая в iPhone, iPod Touch и iPad, масштабирует страницу по размеру экрана, после чего пользователь может свободно увеличивать и уменьшать масштаб.

Тем не менее, вы можете разработать свою страницу так, чтобы минимизировать необходимое масштабирование. Лучше всего сделать ширину и высоту такими же, как у iPad с более низким разрешением, поскольку вы не знаете, в каком направлении он ориентирован; Другими словами, вы должны сделать свою страницу 768x768, чтобы она хорошо вписывалась на экран iPad, независимо от того, ориентирован ли он на 1024x768 или 768x1024.

Что еще более важно, вы захотите создать свою страницу с большими элементами управления с большим пространством, по которым легко ударить большим пальцем - вы можете легко создать страницу 768x768, которая была бы очень загромождена и поэтому требовала большого масштабирования. Для этого вам, вероятно, захочется разделить элементы управления между несколькими веб-страницами.

С другой стороны, это не самое стоящее занятие. Если во время разработки вы найдете возможности сделать свою страницу более удобной для пальцев, тогда дерзайте ... но на самом деле пользователям iPad очень удобно перемещаться, увеличивать и уменьшать масштаб страницы, чтобы добраться до вещей, потому что это необходимо на большинстве веб-сайтов. Во всяком случае, вы, вероятно, захотите спроектировать его так, чтобы он подходил для такого типа навигации.

Создавайте блоки с соответствующими сгруппированными данными, на которые можно легко дважды нажать, чтобы сосредоточиться, и держите связанные элементы управления рядом друг с другом. Пользователи iPad, скорее всего, оценят страницу, которая упрощает знакомую им навигацию с масштабированием и панорамированием, к которой они привыкли, больше, чем страницу с меньшим количеством элементов управления, так что им не нужно.

Вы можете попробовать это:

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

        }
    }