Стандарт для iPad и WIDTH & HEIGHT

Question

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

Спасибо.

Эрик

Answer 1

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

Answer 2

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

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

        }
    }