Как сделать так, чтобы сайт лучше отображался в iPhone и iPad?(слишком малая ширина)

Question

Я работаю с веб-сайтом, который хорошо работает в большинстве браузеров (все, что я тестировал), но в iPhone (4) с ios5 это выглядит не очень хорошо.

Это как-то сокращает примерно 80-100px от правой части сайта, и, таким образом, скрыть текст и изображения.

Как настроить этот веб-сайт таким образом, чтобы iPhone (и iPad) отображал все?

Ширина составляет 1030 пикселей.Обычно я вижу, что iPhone «масштабирует» веб-страницу, чтобы соответствовать размеру экрана, но почему-то не так.

Вот сайт

Я дурачился сcss, чтобы посмотреть, поможет ли это, но теперь я не нашел его.

Есть идеи?

Нужно ли использовать какой-нибудь javascript или мне нужно как-то изменить дизайн?

PS: Я не собираюсь сейчас делать «мобильный сайт», просто заставить текущий сайт показывать все в iPhone и т. Д.

Answer 1

@ Jeroen имел лучший ответ в моей ситуации:

<meta name="viewport" content="width=1030, maximum-scale=1.0" />

Поскольку Jeroen не представил в качестве ответа, я публикую его здесь в качестве ответа: -)

Я поставилвыше мета на моем сайте, и это работает как шарм! Спасибо, Йерун

Answer 2

Пара решений:

1) Я бы попробовал медиазапросы, чтобы специально нацелить на более мелкие устройства, см. Здесь: http://www.alistapart.com/articles/responsive-web-design/

2) В качестве альтернативы, вы можете настроить таргетинг на устройства iOS напрямую, попробуйтеэто решение: Загрузка сценария JS только для устройств iOS?

Answer 3

Обычное решение таких проблем - создание разных таблиц стилей для разных браузеров.Проведите небольшое исследование, чтобы узнать, откуда подключается пользователь (IE, Chrome, Ipad и т. Д.), И связывайте css соответствующим образом.