Как мне поддерживать более мобильную ширину области просмотра на веб-сайте с поддержкой CSS3 и заставить мобильный браузер использовать правильную ширину?

У меня есть веб-сайт с фиксированной шириной 1000 пикселей. Я хочу поддерживать 2 меньших ширины этой страницы. Я успешно сделал это с помощью медиа-запросов CSS, подобных этому:

@media only screen and (min-width : 800px) and (max-width : 999px) {
  #content { width:800px; }
}
@media only screen and (max-width : 799px) {
  #content { width:600px; }
}

Теперь, когда я тестирую свою веб-страницу в браузере Android (2.3.3), она использует ширину области просмотра 1000 пикселей, поэтому веб-сайт отображается на полную ширину. Но было бы намного лучше, если бы была выбрана ширина области просмотра 800 пикселей, потому что веб-страница будет отображаться более оптимизированной для устройств с меньшими дисплеями.

Я знаю, что могу установить ширину области просмотра, например,: или установить ширину, соответствующую физической ширине устройства, используя: , но ничего из этого не сработает. Потому что либо это заставит все мобильные устройства всегда использовать область просмотра 800 пикселей в первом случае, либо во втором случае будет использоваться физическая ширина пикселей на устройстве, но это тоже не сработает, потому что в портретном режиме (как большинство людей просматривают мобильные web и использовать телефон) размером 300 или не более 400 пикселей, что слишком мало, и пользователю придется много прокручивать по горизонтали.

На самом деле у меня такой вопрос - могу ли я поддерживать и, возможно, заставлять мобильные браузеры использовать разную ширину области просмотра в зависимости от их фактического размера экрана? Я не знаю, достаточно ли я объяснил это, поэтому я приведу пример того, чего я хочу достичь:

Для мобильных устройств с физической шириной 400 пикселей (современные устройства с большими дисплеями) я хотел бы принудительно установить окно просмотра шириной 800 пикселей и, возможно, с масштабом 0,5, чтобы при первом посещении страницы отображалось полное изображение без необходимости горизонтальной прокрутки и с возможностью увеличения масштаба отдельных частей страницы.

Для мобильных устройств с физической шириной 300 пикселей (некоторые устройства среднего и низкого уровня) или меньше - я хотел бы принудительно установить область просмотра шириной 600 пикселей и, возможно, с масштабом 0,5, чтобы при первом посещении отображалось полностью или, по крайней мере, большая часть его на экране с небольшой горизонтальной прокруткой. И, конечно же, пользователь может увеличивать отдельные части страницы.

Можно ли это настроить, используя только CSS или CSS3? Я могу представить себе JS-решение, но я хотел бы реализовать его только с помощью CSS.

Заранее благодарим вас за любую помощь.