Метка страницы более узкая и не центрированная на iPad

Question

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

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

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

Answer 1

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

Answer 2

Я проверил страницу на моем IPad (последний IOS V5.1), и я могу видеть текст «верхней части Салфетка» на одной строке, хотя вы правы насчет всей страницы не становится выровнен по центру ..

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

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

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

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

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

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

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

margin:0 auto 

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

Существует некоторая реальная хорошая информация о том, как создавать веб-сайты для мобильных устройств (iPhone/IPad и т.д.) на http://bit.ly/rs1npZ

Answer 3

приведенный выше ответ не работает для меня на IPad. Вот что работало. В теге body я добавил минимальную ширину того, что хотел бы в браузере.

body { min-width:1080px; } 

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

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

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

Answer 4

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

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

Я исправил его, играя с переполнением-x.

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

Answer 5

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

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