Стандарт WIDETH & HEIGHT для браузера iPad

Ответ 1

Ширина и высота пикселя вашей страницы будут зависеть от ориентации, а также от тега meta viewport, если это указано. Ниже приведены результаты запуска 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

Ответ 2

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

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

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

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

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

Ответ 3

Вы можете попробовать следующее:

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

        }
    }