3 ответов:
ширина и высота пикселя вашей страницы будет зависеть от ориентации, а также тега meta viewport, если он указан. Вот результаты запуска jQuery $(window).width() и $(окно).высота() в браузере iPad 1.
когда страница не имеет тега meta viewport:
- портрет: 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{ } }
Comments