viewport元标记：当width <= 320时，initial-scale属性的行为会有所不同

时间：2012-01-29 13:27:45

标签： android browser webkit viewport

我无法理解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属性，并使用带有用户代理的三星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

    4. .... ....

    上面的输出是我所期望的。使用initial-scale=2时，字体和边距的缩放比例是initial-scale=1的两倍，是initial-scale=0.5的4倍。我得到任何width＆gt;的类似预期输出320。

    以下三个图像分别具有以下三个属性。

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

      4. .... ....

      这里的输出对我没有意义。

      1. initial-scale=2看到的边距与initial-scale=1看到的边距相同。为什么？
      2. 使用initial-scale=0.5，我们发现保证金是我们initial-scale=1所看到的两倍。为什么保证金翻了一倍而不是缩减到一半？为什么这里的字体没有改变？

        3. 我得到类似的输出，对我来说任何width≤320都没有意义。

0 个答案:

没有答案
相关问题
最新问题