iPad-браузер WIDTH & HEIGHT standard

Question

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

Спасибо.

Erik

Answer 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
• Пейзаж: 1024х1024

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

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

Answer 2

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

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

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

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

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

Answer 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{ 

     } 
    }