Question

我正在玩视口并试图做宽度为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>

Answer 1

This article似乎表明content="initial-scale=1, maximum-scale=1, user-scalable=no"是问题，如果您尝试创建固定视口，则应将其省略。

我自己没有机会测试它，但理由似乎很合理。

希望有所帮助。

Answer 2

很难依赖视口元标记的宽度。正如this article所指出的那样：

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

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

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

Answer 3

对于设置初始或最大比例的页面，这意味着width属性实际上转换为最小视口宽度。例如，如果您的布局需要至少500像素的宽度，那么您可以使用以下标记。当屏幕宽度超过500像素时，浏览器将展开视口（而不是放大）以适应屏幕：

<meta name="viewport" content="width=500, initial-scale=1">

这是源于此LINK。

所以我假设在你的情况下，因为你已经将html标签宽度设置为超过520px，浏览器将520px宽度作为最小宽度并从那里向上工作以呈现更大的标签。

Answer 4

您的标头标签（H1，H2，H3）宽度分别为980px，520px和320px。您的标头标签具有硬编码宽度，因此无论设备宽度如何，但标头标签宽度将相同且不会响应。我认为不是以像素为单位提供宽度，而是为什么不使用％的宽度。您还可以将标题标记放在容器position:relative的一个容器中，即使您可以相对于您的个人标题标记。

视口忽略自定义宽度

4 个答案: