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


125

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

Спасибо.

Erik


1
Вот ссылка на один из симуляторов на основе браузера, который вы можете использовать для тестирования ландшафтного режима iPad http://alexw.me/ipad2/#!safari
Venkat - Open IT

Ответы:


277

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

Это для ipad 2 под управлением ios 5.x? На ipad 1, работающем под управлением ios 4.x, нет панели вкладок под адресной строкой.
Ericson578,

Ericson578: Все это для ipad 1.
Пол Радемахер

2
1024x1024 это опечатка?
Ciantic 07

@Ciantic Боюсь, это не опечатка.
kim3er

13

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

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

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

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

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


Большое вам спасибо за ответ. Я согласен. Я пока не могу позволить себе iPad. У меня сложилось впечатление, что большинство людей будут смотреть на веб-страницы в портретной ориентации, а не в альбомной. Я знаю, что хотел бы. И спасибо за напоминание об удобстве использования пальцев. Совершенно верно! Спасибо. Erik
Erik

4
768x1024 не учитывает размер urlbar и вкладок, и он различается в зависимости от ipad (1 или 2, а также между ios 4 и 5)
Ericson 578,

0

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

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

        }
    }
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.