Мобильный дружественный шаблон - PullRequest
Новая
       4

Мобильный дружественный шаблон

1 голос
/ 29 февраля 2012

Я пытаюсь создать дружественный для мобильных устройств веб-сайт, но, похоже, не могу правильно настроить базовый шаблон.

http://jsfiddle.net/dvQqb/

Шаблон должен быть полноэкранным, но невесь текст должен быть маленьким, как мой дисплей HTC Sensation (мобильный телефон).Таким образом, его ширина должна составлять 100%, но его не нужно видеть так, как будто он уменьшен.

Ответы [ 2 ]

5 голосов
/ 29 февраля 2012

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

Чтобы сообщить мобильному браузеру, что вы хотите настроить таргетинг на собственный размер экрана, вам нужно добавить информацию метатега области просмотра:

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

1 голос
/ 29 февраля 2012

Отличное место для начала - html5 Mobile Boilerplate .

Почему это круто

  • Кроссплатформенная совместимость (Android, iOS,Blackberry, Symbian)
  • Класс CSS для IE IE 7
  • Значок главного экрана (Android, iOS, Symbian)
  • Кросс-браузерная оптимизация области просмотра для Opera Mobile, Android, iOS, IE, Nokia, Blackberry.
  • Оптимизированное масштабирование области просмотра (Opera Mobile, Android, iOS, Mobile IE, Blackberry)
  • Возможность включения начального экрана iOS в полноэкранном режиме
  • Улучшенный рендеринг шрифтов в IE Mobile
  • Адаптируемая разметка и скелет CSS
  • Таблица стилей CSS для бюджетных устройств
  • Карта мобильного сайта
  • Поддержка типа MIME для мобильных устройств
  • Сборка инструмента для мобильных устройств
  • Исправлена ​​ошибка масштабирования при перекомпоновке iPhone
...