использование мета-тега viewport для браузера на устройствах Android

Question

Я занимаюсь разработкой мобильного веб-сайта, и он отлично работает на мобильном Safari. Однако на устройствах Android веб-сайт слишком сильно увеличен, но только на некоторых устройствах. Я попробовал это на телефоне моего друга, и у него HTC Magic под управлением Android 2.1, и он показывает нормально, но он слишком сильно увеличен на эмуляторе с использованием 2.1 и моего телефона, который является Motorola Backflip под управлением Android 1.5. Любая идея, почему есть несоответствие?

Ссылка: http://itphosting1.com/dtang/jarritos/

Это мета-тег viewport, который я использую:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

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

Answer 1

Как насчет изменить его на что-то вроде

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

Answer 2

У меня была похожая проблема, но решение очень зависело от настройки сайта, над которым я работаю.На Android 2.2 и ниже, сайт не будет корректно масштабироваться до устройства, и медиа-запросы будут реагировать на мое масштабирование - уменьшение масштаба, активация медиа-запроса большей ширины, увеличение масштаба и применение медиа-запросов меньшей ширины.1001 *

Для решения вопроса достаточно было использовать <meta name="viewport" content="width=device-width, initial-scale=1">, поскольку меня интересует метатег viewport.Затем я должен был принять во внимание, что основной контейнер страницы имеет явную ширину, заданную в CSS.Хотя эта ширина будет соответствовать ширине области просмотра в других браузерах, в этом случае она не будет.Я мог оставить явно объявленную ширину в CSS, если я убедился, что при запуске первого медиазапроса основной контейнер будет иметь ширину 100%.Таким образом, в основном, используя LESS синтаксис :

@containerWidth: 1080px;

#page {
    width: @containerWidth;
}

@media screen and (max-width: @containerWidth) {
    #page {
        width: 100%;
    }
}