html - Запутался в «начальном масштабе=1,0»-iPhone 3GS против 4



css html5 (3)

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

У нас есть сайт, который имеет минимальную ширину 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, и он будет выглядеть дерьмово на iphone 3Gs (будет видеть только половину сайта). Теперь на Iphone 4 (с разрешением в 640 пикселей) он будет правильно масштабирован до 640 пикселей, если я использую «initial-scale = 1.0».

С другой стороны, если графика составляет 480px, для 3G требуется масштабирование = 0,667, а для iOS 4 - 1,3, правильно?

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

Очень расстраиваюсь :( Чувствую, что мне не хватает чего-то важного, что я уже должен знать.

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

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

https://ffff65535.com


«ширина» - сказать браузеру, насколько широк ваш сайт при 100% увеличении. если вы разработали свой веб-сайт так, чтобы он был плавным, вы можете указать здесь «device-width», и браузеру не нужно будет использовать масштабирование, так как ваш макет разработан так, чтобы соответствовать любой ширине области просмотра.

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


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

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

Довольно сложно, и кажется, что должен быть лучший способ сделать это, но в настоящее время это работает.

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


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

Попробуй это:

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




css3