Confused on "initial-scale = 1.0" - iphone 3GS против 4

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

У нас есть сайт, который рассчитан на минимальную ширину 640 пикселей, максимум чего бы то ни было. В настоящее время у меня есть метатег:

<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" />

Теперь - часть, о которой я запутался, заключается в том, что если я использую "initial-scale = 1.0", очевидно, что сайт будет масштабироваться 1:1, и он будет выглядеть crappy на iphone 3Gs (будет видеть только половину сайта). Теперь, на Iphone 4 (с разрешением 640 пикселей), он будет масштабироваться правильно на 640 пикселей, если я использую "начальный масштаб = 1.0".

В качестве альтернативы, если графика составляет 480 пикселей, 3Gs потребует масштабирования =.667, а для iOS 4 требуется 1.3, правильно?

Итак, как вы получаете сайт, который идеально подходит к краю? Может ли браузер определить ширину устройства, а затем установить масштаб соответственно? Существует множество различных размеров устройств... андроид, более старые iphones, ежевики и т.д.

Быть довольно беспорядочным: (Чувствую, что у меня отсутствует что-то важное, что я должен уже знать.

Изменить. Кажется, что метатег "начального масштаба" должен масштабировать сайт относительно окна просмотра, а затем использовать width = device-width для установки фактического размера видового экрана.

Проблема, с которой я, похоже, сталкиваюсь, заключается в том, что окно просмотра не масштабируется, чтобы соответствовать устройству, оно остается на уровне 640 пикселей независимо от того, какой тег я использую. Что мне здесь не хватает???

Ответ 1

Хорошо, я понял это... по существу.

Поскольку мой дизайн на самом деле равен 2x размера окна просмотра (вроде), ключ состоит только в том, чтобы использовать "начальную шкалу = 0,5". Он работает правильно на обоих устройствах (3Gs и 4) и более или менее правильно на устройствах Android и т.д.

Какой-то хитрый, и кажется, что должен быть лучший способ сделать это, но пока это работает.

Спасибо всем, кто предоставил вход.

Ответ 2

Я думаю, что основная проблема с исходным сообщением заключается в том, что полуколоны не работают на iPhone 4+. Он работает только с запятыми в качестве разделителей (или только с настройкой ширины устройства). Другие браузеры кажутся более терпимыми.

Следующее работает для меня надежно:

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

Вы также хотите отключить тело и документ от прокрутки по горизонтали:

body, html
{    
    overflow-x: hidden;        
}

Хорошая ссылка для получения дополнительной информации о сайте Mozilla:

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

Ответ 3

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

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

Ответ 4

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

Попробуйте следующее:

<meta name="viewport" content="width=640; user-scalable=no;" />