5

I am playing around with viewport and tried to do a width of 520, but it seems to do device-width instead. Any ideas?

<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>
4

4 回答 4

0

很难依赖视口元标记来获取宽度。正如这篇文章所指出的：

有时正式screen.width没有多大意义，因为像素数太高了。例如，Nexus One 的正式宽度为 480 像素，但 Google 工程师认为在使用 device-width 时为布局视口提供 480 像素的宽度太过分了。他们将其缩小到 2/3，因此 device-width 为您提供 320 像素的宽度，就像在 iPhone 上一样。

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

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

于 2013-07-19T14:00:19.823 回答
0

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

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

希望有帮助。

于 2013-07-19T13:50:22.007 回答
0

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

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

这是从这个LINK派生的。

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

于 2013-07-22T11:30:43.303 回答
-1

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

于 2013-07-22T10:58:49.453 回答