使用视口拥有适合移动设备的网站

Question

I'm working on a website for a small festival对于朋友，但我正在尝试使用移动浏览而不使用流畅的布局等。这只是一个我想使用经典视口脚本的网站，因此当移动设备到达时，它将处于最小缩放状态。

HTML

<meta name="viewport" content="450, initial-scale=1, maximum-scale=1">

这就是我现在所拥有的，但我也尝试过这种方式。

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

然而，每次我在移动设备上访问该网站时，它都会放大，因此您只能看到徽标。

我做错了什么？

在手机上查看时，我还注意到了另外两件事。 页脚背景颜色不会一直延伸（如果我有设备宽度或宽度=“XXX”则没有区别）。但我的页脚宽度是100％。我不明白这里发生了什么。

我正在尝试在内容的左侧和右侧放置填充或空格，以便网站不会停留在窗口的一侧。我希望左右两侧有空间。我试过把它放在html标签上，但它只适用于左侧？

我去了https://developer.mozilla.org/en/Mobile/Viewport_meta_tag＆amp; http://www.quirksmode.org/mobile/viewports2.html和其他网站无法理解在任何这些情况下可能发生的情况。

非常感谢任何帮助，建议，指导或指导。

Answer 1

要修复背景问题，请尝试添加以下内容：

body {
       min-width: 1024px;
}

页面的顶部部分位于具有明确宽度（960px）的容器内，这就是您没有遇到问题的原因。然而，页脚本身没有明确的宽度设置。您也可以将它放在同一个div中，并使用您用于页面其余部分的id“容器”。

这也应该解决你的填充问题。确保将其添加到内容容器中。例如：

#main {
       padding: 0 1.5em;
}

至于缩放问题，我没有在iPad或iPhone上看到它。由于您没有做任何流动性或响应性，这就是您应该使用的。 initial-scale = 1正在做的是将其缩放到其实际宽度，而不是将其适合您的屏幕。

<meta name="viewport" content="width=device-width"/>

您可能想要查看此问题：Android ignores maximum-scale when using fixed-width viewport meta-tag了解Android问题。我没有便于测试的Android设备，所以我不想在这部分给你不正确的信息。