Веб-сайт имеет неправильную ширину на iPhone на iOS4 при сохранении на главном экране

У меня есть веб-сайт, который отлично выглядит при просмотре в Safari на iPhone. В iOS3.x вы можете сохранить его как значок на главном экране, и он откроется нормально.

Но в iOS4, хотя он по-прежнему выглядит правильной ширины в Safari, если вы откроете его прямо со значка на главном экране, он станет слишком широким.

Я потратил пару часов на то, чтобы возиться с различными настройками метатега области просмотра и настройками CSS, но без всякой радости. Может ли кто-нибудь увидеть, что не так, или почему в iOS4 и iOS3 все будет иначе?


iphone css safari width webkit
person Phil Gyford    schedule 22.06.2010    source источник
comment
Вот скриншот того, как это должно выглядеть: gyford.com/temp/guardian1.png И один из примеров того, как это выглядит при открытии с главного экрана в iOS4: gyford.com/temp/ guardian2.png   -  person Phil Gyford    schedule 22.06.2010
comment
На случай, если кто-то снова с этим столкнется, я написал свое возможное решение здесь: gyford.com/phil/writing/2010/07/06/web-page-iphone.php В основном используйте max-width, а не width.   -  person Phil Gyford    schedule 06.07.2010

Ответы (3)


arrow_upward
0
arrow_downward

РЕДАКТИРОВАТЬ: Я тестировал это, и что-то определенно не так. Я не могу вам здесь помочь, но, вероятно, это как-то связано с вашим CSS.

Исходный ответ:

Это потому, что iPhone автоматически сохраняет текущий уровень масштабирования веб-сайта, когда вы создаете веб-клип на главном экране. Убедитесь, что вы полностью уменьшили масштаб, прежде чем создавать веб-клип, если вы не хотите, чтобы это произошло.

person Emil    schedule 22.06.2010
comment
Спасибо, что посмотрели Эмиля. Странно, что в iOS3 он, кажется, работает нормально, и что в этих двух ситуациях он выглядит по-разному. Интересно, чем отличается рендерер? - person Phil Gyford; 22.06.2010
comment
Похоже, что сайт возвращается к этому положению. Если вы немного прокрутите страницу, она вернется наверх через несколько секунд. Вы еще не определили мета-тег REFRESH? - person Emil; 22.06.2010
comment
Нет. Я не понимаю, что вы имеете в виду, говоря «вернуться наверх». Я думаю, что, возможно, это всего лишь первый раз, когда вы открываете значок с главного экрана - изначально у него просто предварительная версия из Safari, но нет панели местоположения Safari в верхней части страницы. Когда он загружает страницу по-настоящему, он помещает ее в верхнюю часть экрана. Я не думаю, что это связано с этой проблемой. - person Phil Gyford; 23.06.2010

arrow_upward
0
arrow_downward

Я посмотрел на ваш CSS, и вы определяете ширину в пикселях. Попробуйте использовать "width: 100%" в ваших div (обертка, окно, главное и т. Д.) Вместо установленного px. Конечно, это означает, что вам придется «распознать» устройство и отправить другой CSS, если это что-то, кроме веб-просмотра на iphone.

А пока просто протестируйте 100%, если он работает, вы можете начать смотреть на перенаправление css в зависимости от устройства, которое просматривает страницу.

Надеюсь, это имеет смысл, если не дайте мне знать.

person Louie    schedule 22.06.2010
comment
Спасибо, но похоже, что это примерно то же самое - сайт выглядит нормально в Safari, но не при открытии с главного экрана. Странный. Документы Apple предполагают, что сайт фиксированной ширины подойдет, если вы правильно установите область просмотра: developer.apple.com/safari/library/documentation/, если ваша веб-страница уже 980 пикселей, вам следует установить ширину область просмотра, чтобы соответствовать вашему веб-контенту. Если вы разрабатываете веб-приложение для iPhone ... установите ширину равную ширине устройства. - person Phil Gyford; 22.06.2010

arrow_upward
0
arrow_downward

К вашему сведению - это сводит меня с ума. Моя ссылка на домашний экран отлично работала с vn 3, и теперь она не работает.

Я уверен, что это ошибка ... отвечу, если / когда найду исправление.

person Gary Barnett    schedule 14.07.2010