Оптимизация для мобильных браузеров

Question

У меня есть простая веб-страница, которая создается на сервере. Он имеет простые текстовые поля, переключатели, ярлыки и тому подобное (очень напоминает простую форму). Я пытаюсь оптимизировать это для мобильных браузеров. Я хотел бы сделать это как можно большим количеством CSS, и я хотел бы найти способ поддержки iphone, android и популярных мобильных ОС.

У меня такой вопрос, могу ли я стилизовать страницу так, чтобы поля всегда занимали 100% ширины телефона, метки обтекали и т. Д., Но также делали так, чтобы пользователь не мог увеличивать или уменьшать масштаб и иметь масштабирование отображается правильно, если на него смотрит iphone4 или iphone3g?

Я нашел фрагменты своего ответа, используя метатеги, но я не могу найти способ сделать масштабирование всегда правильным, независимо от разрешения.

Answer 1

<meta name="viewport" content="width=device-width, user-scalable=no" />

Это прекрасно работает для iOS, но в альбомной ориентации BlackBerry и Android страница остается слева и не масштабируется.Я думаю, что это как-то связано с выводом высоты iOS (и другими атрибутами), если он не установлен явно, в то время как для других платформ может потребоваться набор height=device-width.