html - 使用视口(viewport)拥有移动友好的网站

Question

I'm working on a website for a small festival对于一个 friend ，但我正在尝试使用没有流畅布局等的移动浏览器。这只是一个我想使用经典视口(viewport)脚本的网站，因此当移动设备访问它时它将处于最小缩放。

HTML

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

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

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

然而，每次我在移动设备上访问该网站时，它都会被放大，所以你只能看到 Logo 。

我做错了什么？

在手机上查看时，我还注意到另外两件事。 页脚背景颜色不会一直延伸(如果我有 device-width OR width="XXX"也没什么不同)。然而我的页脚宽度是 100%。我不明白这里发生了什么。

我正在尝试在内容的左侧和右侧放置填充或空格，这样网站就不会停在窗口的正上方。我想在左边和右边留出空间。我试着把它放在 html 标签上，但它只适用于左侧？？

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

非常感谢任何帮助、建议、方向或指导。

Answer 1

要解决背景问题，请尝试添加此内容:

body {
       min-width: 1024px;
}

您将页面的顶部部分置于具有显式宽度 (960px) 的容器中，这就是为什么您对它们没有问题的原因。然而，页脚是独立的，没有明确的宽度设置。您也可以将它放在同一个 div 中，并使用您用于页面其余部分的 ID“container”。

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

#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 设备，所以我不想在这方面给你不正确的信息。