Intereting Posts
Разница между setText () и append () EditText setError () со значком, но без всплывающего сообщения Grade Plugin 3-alpha1 outputFile вызывает ошибку TextView с различным textSize Logcat не отображает мои логические вызовы Android Studio: как удалить / фильтровать варианты сборки для отладки и выпуска buildTypes по умолчанию и сохранить только те, которые используют пользовательские типы buildTypes? Установите политику истечения срока действия для кеша с помощью Google Volley См. Изменения в источниках библиотеки поддержки Android между двумя версиями Как запустить автозапуск приложения для работы с Android Chrome при запуске Ошибка манифеста слияния Использовать Insert или Replace в ContentProvider Установить вход / выход текста для кнопки в Android Android SDK 4.0? Как заставить остановить Intent Service в процессе? Незарегистрированная ошибка токена после отправки одного уведомления Определение DEVELOPER_MODE для StrictMode

Смысл масштабирования мета-просмотра Android: что мне не хватает?

Я пытаюсь определить, как на видовом экране – и на содержимом внутри – влияет метатег viewport, используемый для рисования контента с помощью WebView или с родным браузером.

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

Во-первых, некоторые наблюдения:

  1. Ни один из номеров ширины видового экрана не является тем, что я ожидал, только близко.
  2. Когда числа близки к числу пикселей устройства, рисунок фактически выполняется один за другим – или, по крайней мере, явно выглядит таким образом.
  3. Если размер страницы (размер документа) соответствует размеру области просмотра, номера в окне просмотра уменьшаются. То есть, окно просмотра не всегда обязательно представляет максимально возможное видимое пространство – просто текущее видимое пространство.
  4. Аналогично, в собственном браузере размер окна просмотра настраивается верхней панелью. Размер увеличивается при прокрутке экрана. Указанные цифры предназначены для полноэкранного отображения.

Устройство №1: физический экран – 1024×600, а на нем – Android 2.2.

  1. Начальная шкала = 1.0 => 676×400
  2. Начальная шкала = 1.0, width = device-width => 676×400
  3. Начальная шкала = 2, ширина = ширина устройства => 338×200
  4. Начальная шкала = 2, ширина = ширина устройства, целевая плотность dpi = устройство-dpi => 507×300
  5. Начальная шкала = 0,5, ширина = ширина устройства, целевая плотность dpi = device-dpi => 800×473
  6. Начальная шкала = 0,9, ширина = ширина устройства, целевая плотность dpi = устройство-dpi => 800×473
  7. Width = device-width, target-densitydpi = device-dpi => 1014×600
  8. Initial-scale = 1.0, width = device-width, target-densitydpi = device-dpi => 1014×600
  9. Начальная шкала = 0,5, ширина = ширина устройства, целевая плотность dpi = устройство-dpi, минимальная шкала = 0,1 => 2028×768
  10. Начальная шкала = 0,5, ширина = ширина устройства, целевая плотность dpi = устройство-dpi, минимальное значение = 0,1, масштабируемое пользователем = нет => 1014×600

Устройство №2: физический экран 800×480 и работает под управлением Android 2.3.2.

  1. Начальная шкала = 1.0 => 527×320
  2. Начальная шкала = 1.0, width = device-width => 527×320
  3. Начальная шкала = 2, ширина = ширина устройства => 263×160
  4. Initial-scale = 2, width = device-width, target-densitydpi = device-dpi => 395×240
  5. Начальная шкала = 0,5, ширина = ширина устройства, целевая плотность dpi = device-dpi => 790×480
  6. Initial-scale = 1.0, width = device-width, target-densitydpi = device-dpi => 790×480
  7. Начальная шкала = 0,5, ширина = ширина устройства, целевая плотность dpi = устройство-dpi, минимальная шкала = 0,1 => 1580×768
  8. Начальная шкала = 0,5, ширина = ширина устройства, целевая плотность dpi = устройство-dpi, минимальная шкала = 0,1, масштабируемая пользователем = нет => 790×480
  9. Width = 1580, target-densitydpi = device-dpi => 790×480
  10. Width = 1580, target-densitydpi = device-dpi => 790×480
  11. Width = 1580, target-densitydpi = device-dpi, минимальный масштаб = 0,1 => 790×480

Из этих результатов следующее не имеет смысла:

  1. Устройство №1, пункты 5, 6 и 10
  2. Устройство №2, пункты 5, 8, 10, 11, 12

Кто-нибудь знает, что происходит с теми, которые не имеют смысла?

Кто-нибудь знает, почему многие из этих значений являются 10 пикселями, которые не соответствуют физическим пикселям, но результат такой, как если бы они совпадали? (Например, 1,7 и 2,6)

Я что-то делаю неправильно, или похоже, что невозможно увеличить масштаб за пределы 1.0, если пользователю также не разрешено масштабировать, а значение минимального масштаба установлено?

То есть, хотя допустимые значения составляют от 0,01 до 10, значения начального значения ниже 1.0 игнорируются, если вы не можете установить минимальный масштаб.

Android-документы действительно говорят, когда масштабируемость пользователя не та, что значения масштаба min / max игнорируются. Это не очень полезно. И 2.9-2.11, похоже, показывают, что вы не можете просто вычислить его самостоятельно и установить ширину.

Наконец, HTML, который я использую:

<html> <script src="http://code.jquery.com/jquery-1.4.4.js"></script> <head> <meta name="viewport" content="initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no" /> </head> <body style="margin:0;"> <div id="bld" class="bld" style="position:absolute; width:250px; height:125px; left:50px; background-color:#ccccff;">Hello world.</div> <img id="bl1" src="http://commondatastorage.googleapis.com/kf6nvr/images/1024x768.png" /> <script> $("#bl1").click(function(){ var pageWidth = $(document).width(); var pageHeight = $(document).height(); var viewportWidth = $(window).width(); var viewportHeight = $(window).height(); $("#bld").html("Page width: "+pageWidth+"<br />pageHeight: "+pageHeight+"<br />port width: "+viewportWidth+"<br />port height: "+viewportHeight); }); </script> </body> </html> 

Итак … что мне не хватает?

Solutions Collecting From Web of "Смысл масштабирования мета-просмотра Android: что мне не хватает?"

Интересная возможность червей, которую вы открыли там. Когда вы пробуете больше устройств, вы, вероятно, увидите еще более странные и случайные ошибки. Интересные времена! 🙂

Я подозреваю, что где-то вниз по линии, которую вы, возможно, захотите сдаться, и просто попытайтесь …

  • Придерживайтесь как можно более простыми настройками.
  • Примите ширину пикселя, которую устройство решает сообщить.
  • Положитесь на адаптивную / жидкую компоновку и относительную ширину, чтобы заставить вещи работать на разных ширинах экрана.
  • Используйте собственные свойства CSS для нейтральной рендеринга разрешения округлых углов, теней и градиентов.
  • Используйте как можно больше векторных форматов (svg, иконки и т. Д.)
  • И ( важно ) Используйте border-image с высоким разрешением, а также background-image сочетании с хорошо поддерживаемым свойством background-size 1, чтобы сделать вещи рендерингом красивыми и четкими 2 .

1) Чтобы обеспечить обратную совместимость с более старыми браузерами (например, MSIE8), вам нужно будет использовать двойные background-image – например:

 background-image: url(low-res.png); /* CSS2 */ background-image: url(high-res.png), none; /* CSS3 */ background-size: 100px 10px; /* CSS3 */ 

2) -webkit-max-device-pixel-ratio также может помочь, но, как следует из названия, он работает только для веб-браузеров.


Ramble:

У устройств Android и iOS нового поколения есть такие различающиеся экранные DPI, что они прибегают к представлению пикселов CSS, а не фактических пикселей устройства. Это хорошо или плохо – в зависимости от того, как вы на это смотрите.

Это плохо, потому что вам больше не гарантируется управление пиксельным элементом управления, которым вы привыкли иметь, работая с преимущественно однородными экранами.

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

Проблема с использованием target-densitydpi=device-dpi заключается в том, что он, когда он работает чудесами на экране с разрешением 7 дюймов в ширину 800 пикселей, полностью разрушит ваше приложение на 4-дюймовом широкоэкранном 960px экране.

 $(document).ready(function() { $('meta[name=viewport]').attr('content','width=1024, user-scalable=no'); }); 

Кажется, что работа по отключению масштабирования пользователя после применения правильного масштабирования