Retina mobile web app

Question

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

Я занимаюсь мобильным веб-приложением, где я не могу использовать отзывчивые стили (= определение размеров в процентах или ems и т. Д.); все должно быть идеально. До сих пор я работал с макетом 640 pixels wide (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 для ОС, и я открыт для него; однако сохранение отдельных таблиц стилей для каждой ОС/резолюции кажется очень непрактичным.

Answer 1

Причина, по которой это не работает, потому что 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('image@2x.png'); background-size: cover; } 
} 

В этом примере image@2x.png в размере 600x400.

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