Мобильное веб-приложение Retina

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я знаю, что подобные вопросы задавали до смерти, но ни один из них, который мне не удалось найти, помог в моем конкретном случае.

Я делаю мобильное веб-приложение, в котором я не могу использовать адаптивные стили (= определение размеров в процентах или ems и т. Д.); все должно быть безупречным. До сих пор я работал с макетом шириной 640 пикселей (Retina). Целевыми платформами являются небольшие устройства iOS (iPhone, iPod touch), телефоны Android и Windows Phone. Любые дополнительные платформы являются мелочью, но не поддерживаются «официально».

В настольном Chrome это выглядит великолепно, когда я подделываю пользовательский агент с помощью инструментов разработчика. Однако, когда я тестирую его на реальных мобильных устройствах, масштабирование работает по-разному на разных платформах. Android, похоже, вызывает горизонтальную прокрутку, и чем меньше будет сказано о Windows Phone, тем лучше. В настоящее время у меня нет iPhone, чтобы протестировать его.

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

Я пробовал разные мутации в соответствии с ответами, найденными на SO и других сайтах, но метатеги области просмотра, которые я использую в настоящее время, выглядят так;

<meta content='width=640, target-densityDpi=device-dpi, initial-scale=0.5, maximum-scale=0.5, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=640, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />

Насколько я понимаю, у Android есть какая-то проблема с числами шкалы.

Как я мог добиться того, чего хочу? Я уже занимаюсь сниффингом пользовательского агента (я знаю, грязно), поэтому меня устраивают метатеги, специфичные для мобильных ОС.

По большей части приложение еще не готово, поэтому я могу также сделать CSS для мобильных ОС, и я открыт для этого; однако поддержка отдельных таблиц стилей для каждой ОС / разрешения кажется очень непрактичной.


mobile css meta viewport mobile-website
person Emphram Stavanger    schedule 06.05.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Причина, по которой это не работает, заключается в том, что initial-scale=0.5 не означает, что ширина документа 640 будет перекошена до 320; скорее это указывает на начальный уровень масштабирования, который видит пользователь при загрузке страницы.

Я бы рекомендовал изменить ширину DOM на 320 пикселей и установить для свойства initial-scale значение 1. Если вы хотите, чтобы весь макет стал «сетчаткой», вам нужно обратиться к каждому элементу индивидуально. Например. если есть изображение 300x200, которое теперь выглядит нечетким на сетчатке, вы можете обработать это с помощью CSS:

@media  only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/1),
    only screen and (min-device-pixel-ratio: 1.5),
    only screen and (min-resolution: 1.5dppx) {

    img { background-image: url('[email protected]'); background-size: cover; }
}

В этом примере [email protected] имеет размер 600x400.

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

person MikeZ    schedule 22.07.2013