Рендеринг страницы более узкий и не центрируется на iPad

Question

Вот страница , над которой я работаю для класса. Не беспокойтесь, что это все div - упражнение позволяет это поэкспериментировать с веб-шрифтами.

Моя проблема в том, что страница хорошо отрисовывается в IE, Firefox, Safari, но на iPad она не центрируется, а масштаб отключен. Если вы посмотрите на верхний левый заголовок «Верх салфетки», он на самом деле разбивается на 2 строки на iPad. Левого поля нет, но немного правого.

спасибо за любую помощь -

Answer 1

Ответ выше не работал у меня на iPad. Вот что сработало. В теге body я добавил минимальную ширину, которую я хотел бы видеть в браузере.

body { min-width:1080px; }

Это работало без добавления

<meta name="viewport" width=device-width />

но я оставил его в заголовке для хорошей меры.

Answer 2

Я проверил страницу на своем iPad (последняя версия IOS v5.1) и вижу текст «Верх салфетки» в одной строке, хотя вы правы, что вся страница не выровнена по центру.

Для этого я бы предложил вам сделать 2 вещи;

A. Установите ширину области просмотра, как показано ниже (добавьте эту строку внутри элемента головы);

<meta name="viewport" width=device-width />

Приведенная выше строка установит ширину вашего окна просмотра на ширину устройства (то есть 768 пикселей на iPad). Вы можете даже жестко закодировать значение как

<meta name="viewport" width=900 />

Хотя это не лучший подход.

B. Еще одна вещь, которую вы можете попробовать, это придать элементу вашего тела следующий стиль

margin:0 auto

Это эффективно выровняет всю страницу по центру.

На сайте http://bit.ly/rs1npZ

приведена действительно полезная информация о том, как создавать веб-сайты для мобильных устройств (iPhone / iPad и т. Д.).

Answer 3

Возможно, вам нужен метатег viewport.Проверьте ссылку для получения информации о том, что это делает и какой выбрать.http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/

Answer 4

У меня была такая же проблема.Вот как я это исправил:

<meta name="viewport" content="width=device-width, maximum-scale=.9" />

Answer 5

У меня была такая же проблема.

С моей стороны, страница была разбита из-за элементов div, превышающих их контейнер.

Я исправил ее, поиграв со свойством overflow-x.1005 *

Вы можете попробовать поместить overflow-x: hidden;на ваших контейнерах.