Браузер iPhone, добавляющий правое поле для некоторых DIV

Question

Вот как должен выглядеть сайт, который я собираю: ГБ Персональный тренинг

Вот как это выглядит на iPhone: Браузер iPhone

Как вы можете видеть, он выдвигает DIVs #wrap и # external-wrap, так что фоновые изображения в них имеют правильный край, и я не знаю почему.У меня есть доступ только к файлу custom.css, а не к HTML.

В настоящее время я редактирую его клон по адресу: gbptclone.live.subhub.com/

Answer 1

На самом деле это не даст пользователю масштабировать контент (что отстой, из опыта пользователя):

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Вместо этого, по моему мнению (и я не гуру), вы должны использовать:

<meta name="viewport" content="width=1000px">

Answer 2

Определите max-width в вашем body.Напишите так:

body {
    min-width: 1000px;
}

добавьте это в ваш HTML head:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Answer 3

Попробуйте установить ширину для #outer_wrap и #wrap (вы, вероятно, хотите 100%).

Похоже, что Mobile Safari расширяет размер div # visual-portal-wrapper, чего недостаточно, поскольку Safari изменяет размер текста для отображения на iPhone.Вы можете изменить это с -webkit-text-size-Adjust: нет;но это сделало бы ссылки довольно низкими для пользователей iPhone.Вот почему он подходит для обычного браузера, но не для Mobile Safari.

Изменение ширины элементов div должно помешать им расширять содержимое за пределы их границ (по умолчанию они составляют 974 пикселя, потому что это # ​​visual-portal-wrapper есть, но все содержимое переполняется и вызывает визуальные ошибки) и фоновые изображения кажутся обрезанными.Возможно, вы также захотите добавить фоновое позиционирование для #outer_wrap, поскольку на скриншоте оно выглядит немного не так, как в Firefox.

Редактировать: В качестве альтернативы, вы можете попробовать изменить ширину: 974px;в # visual-portal-wrapper div to min-width: 974px; конечно, убедитесь, что вы учли проблемы IE с min-width).