logo标签列表

视口忽略自定义宽度

htmlviewport
5
我正在尝试使用viewport，试图将宽度设置为520，但似乎实际上是设备宽度。有什么想法吗？
<html>
<head>
<meta name="viewport" content="width=520, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
h1
{
    width: 980px;
    border: 1px solid red;
}

h2
{
    width: 520px;
    border: 1px solid green;
}

h3
{
    width: 320px;
    border: 1px solid green;
}

</style>
</head>

<body>
<h1>I am a big heading 980px wide. Yes I am</h1>
<h2>I am a big heading 520px wide. Yes I am</h2>
<h3>I am a big heading 320 wide. Yes I am</h3>
</body>
1
你读过这篇很棒的文章解释移动设备视口中的像素是什么意思吗？ - Ilya Streltsyn
2
你不设置 DOCTYPE 有特殊的原因吗？ - Volker E.
4个回答
0
对于设置初始或最大缩放比例的页面，这意味着宽度属性实际上转化为最小视口宽度。例如，如果您的布局需要至少500像素的宽度，则可以使用以下标记。当屏幕宽度超过500像素时，浏览器将扩展视口（而不是缩放）以适应屏幕：
<meta name="viewport" content="width=500, initial-scale=1">

这是从 LINK 派生的。
所以我假设在你的情况下，由于你已将 HTML 标签的宽度设置为超过 520px，因此浏览器将 520px 宽度作为最小宽度，并从那里向上工作以呈现更大的标签。
0

这篇文章似乎表明content="initial-scale=1, maximum-scale=1, user-scalable=no"是问题所在，如果你想要创建一个固定的视口，应该省略它们。

我还没有机会亲自测试，但这个理由听起来很有道理。

希望这可以帮助到你。

0

依赖于视口元标记来设置宽度是很困难的。正如this article所指出的：

有时候，正式的screen.width并没有太多意义，因为像素计数太高了。例如，Nexus One的正式宽度为480px，但Google工程师已经决定，在使用设备宽度时，将布局视口的宽度设置为480px太大了。他们将其缩小到2/3，这样设备宽度就会给您提供320px的宽度，就像在iPhone上一样。

这320个像素是“CSS像素”，这意味着无论设备或文档实际有多宽，320个像素都是视口的宽度。

如果您指定的宽度比手机的实际尺寸大（或小）并限制缩放，则会遇到问题。尝试删除initial-scale=1, maximum-scale=1,以允许浏览器正确缩放页面以适合设备。您仍然可以保留user-scalable=no和width=520。

-1
你的标题标签(H1，H2，H3)宽度分别为980px，520px和320px。你的标题标签有硬编码的宽度，因此无论设备宽度如何，你的标题标签宽度都将保持相同，不会变得响应式。我认为，与其以像素为单位提供宽度，不如使用百分比宽度。你还可以将标题标签放在一个容器中，使该容器position:relative，甚至可以相对于您各自的标题标签进行相对定位。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接