метатег viewport: свойство начального масштаба ведет себя по-разному, когда ширина <= 320 - PullRequest
Новая
       28

метатег viewport: свойство начального масштаба ведет себя по-разному, когда ширина <= 320

1 голос
/ 29 января 2012

Мне не удалось понять, как свойства width и initial-scale метатега viewport работают

У меня есть следующий HTML-код. 

<!DOCTYPE HTML>
<html>
<head>
<title>Viewport example A</title>
<meta name="viewport" content="width=321,initial-scale=1">
<style type="text/css">
body {
    background: #800000;
}
p {
    background: #ffffff;
    border: 1px solid gray;
    margin-left: 20%;
    margin-right: 20%;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu massa
erat, eget bibendum tortor. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Aenean lobortis,
leo et porttitor venenatis, sapien nunc sodales elit, ut condimentum
nibh lacus sed erat. Suspendisse potenti. Mauris facilisis, odio nec
commodo tempor, sem arcu dictum lacus, ac ultrices quam purus ultrices
nisl. Nullam cursus consequat nisl non sagittis. Cras convallis porta
dui eu viverra. Maecenas ultrices arcu sit amet nisi pharetra non
malesuada erat tempus.
</p>
</body>
</html>

Я изменяю свойства width и initial-scale и проверяю вывод на телефоне Samsung Galaxy SII с помощью пользовательского агента: Mozilla/5.0 (Linux; U; Android 2.3.4; en-gb; GT-I9100G Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1.

Следующие три изображения имеют следующие три свойства соответственно.

  1. width=321,initial-scale=2
  2. width=321,initial-scale=1
  3. width=321,initial-scale=0.5

image .... image .... image

Вывод выше, что я ожидаю. При initial-scale=2 шрифт и поля были масштабированы вдвое больше, чем initial-scale=1, и в 4 раза больше initial-scale=0.5. Я получаю аналогичный ожидаемый результат для любого width> 320.

Следующие три изображения имеют следующие три свойства соответственно.

  1. width=320,initial-scale=2
  2. width=320,initial-scale=1
  3. width=320,initial-scale=0.5

image .... image .... image

Вывод здесь не имеет смысла для меня.

  1. Поле с initial-scale=2 такое же, как с initial-scale=1. Почему?
  2. С initial-scale=0.5 мы видим, что поле вдвое больше, чем с initial-scale=1. Почему маржа удвоилась, а не сократилась до половины Почему шрифт здесь вообще не изменился?

Я получаю похожий вывод, который не имеет смысла для меня для любого width & le; 320.

...