android - studio - конструктор виджетов андроид




Смысл масштабирования мета-виджета Android: что мне не хватает? (2)

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

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

  • Придерживайтесь как можно более простыми настройками.
  • Примите ширину пикселя, которую устройство решит сообщить.
  • Положитесь на адаптивную / жидкую компоновку и относительную ширину, чтобы заставить вещи работать по разной ширине экрана.
  • Используйте собственные свойства CSS для нейтральной рендеринга разрешения округлых углов, теней и градиентов.
  • Используйте как можно больше векторных форматов (svg, icon-fonts и т. Д.)
  • и ( важно ) Используйте 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 экране.

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

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

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

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

Устройство №1: физический экран имеет разрешение 1024x600 и работает под управлением Android 2.2.

  1. начальная шкала = 1.0 => 676x400
  2. начальная шкала = 1.0, width = device-width => 676x400
  3. начальная шкала = 2, ширина = ширина устройства => 338x200
  4. начальная шкала = 2, ширина = ширина устройства, target-densitydpi = device-dpi => 507x300
  5. начальная шкала = 0,5, ширина = ширина устройства, целевая плотность dpi = device-dpi => 800x473
  6. начальная шкала = 0,9, ширина = ширина устройства, целевая плотность dpi = устройство-dpi => 800x473
  7. width = device-width, target-densitydpi = device-dpi => 1014x600
  8. initial-scale = 1.0, width = device-width, target-densitydpi = device-dpi => 1014x600
  9. начальная шкала = 0,5, ширина = ширина устройства, целевая плотность dpi = устройство-dpi, минимальная шкала = 0,1 => 2028x768
  10. начальная шкала = 0,5, ширина = ширина устройства, целевая плотность dpi = устройство-dpi, минимальная шкала = 0,1, масштабируемая пользователем = нет => 1014x600

Устройство №2: физический экран - 800x480, а на нем - Android 2.3.2.

  1. начальная шкала = 1.0 => 527x320
  2. начальная шкала = 1.0, width = device-width => 527x320
  3. начальная шкала = 2, ширина = ширина устройства => 263x160
  4. начальная шкала = 2, ширина = ширина устройства, целевая плотность dpi = устройство-dpi => 395x240
  5. начальная шкала = 0,5, ширина = ширина устройства, целевая плотность dpi = устройство-dpi => 790x480
  6. initial-scale = 1.0, width = device-width, target-densitydpi = device-dpi => 790x480
  7. начальная шкала = 0,5, ширина = ширина устройства, целевая плотность dpi = устройство-dpi, минимальная шкала = 0,1 => 1580x768
  8. начальная шкала = 0,5, ширина = ширина устройства, целевая плотность dpi = устройство-dpi, минимальная шкала = 0,1, масштабируемая пользователем = нет => 790x480
  9. width = 1580, target-densitydpi = device-dpi => 790x480
  10. width = 1580, target-densitydpi = device-dpi => 790x480
  11. width = 1580, target-densitydpi = device-dpi, минимальный масштаб = 0,1 => 790x480

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

  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>

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


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

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







scaling