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

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

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

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

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

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


mobile-website android-browser mobile-webkit
person skaterdav85    schedule 02.03.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />
person nLL    schedule 02.03.2011
comment
Это не сработало. Я думаю, что это может быть связано с различиями в разрешении и размерах экрана, поскольку они различаются между устройствами Android. Я наткнулся на это сообщение в блоге (quirksmode.org/blog/archives/2010). /09/combining_meta.html), что могло бы быть ответом на мой вопрос, но я действительно не понимаю, к чему бы я применил медиа-запросы. - person skaterdav85; 06.03.2011

arrow_upward
0
arrow_downward

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

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

@containerWidth: 1080px;

#page {
    width: @containerWidth;
}

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