使用视口有友好的移动网站

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 & http://www.quirksmode.org/mobile/viewports2.html和其他网站，并不能理解可能发生在这些情况下的任何情况。

任何帮助，建议，方向或指导是非常赞赏。

来源

2012-03-20 kia4567

您测试过哪些设备？我们发现了不同的Android设备，特别是以奇怪的方式处理（或有时忽略）视口元标记。 – 2012-03-20 17:37:16

现在我正在iPhone，Android和iPad上进行测试。 – kia4567 2012-03-20 18:04:29

要解决的背景问题尝试添加此：

body { 
     min-width: 1024px; 
}

你有一个容器内的页面的顶部部分有明确的宽度（960像素），这就是为什么你不具有的一个问题他们。但是，页脚没有明确的宽度设置。你也可以把它放在同一个div中，并在页面的其余部分使用id'container'。

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

#main { 
     padding: 0 1.5em; 
}

至于缩放问题，我没有在iPad或iPhone上看到它。既然你没有做任何流动性或反应，这就是你应该使用的。初始缩放比例= 1所做的是将其缩放到其实际宽度，而不是将其安装到屏幕上。

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

你可能想看看这个问题：Android ignores maximum-scale when using fixed-width viewport meta-tag为Android问题。我没有方便测试的Android设备，所以我不想给你提供有关该部分的不正确信息。

来源

2012-03-20 21:11:00

我不确定顶端栏所在的容器是什么意思，因为它是html标签上的背景图片，所以一旦我将max-width：1024px;在身体上它使得所有的东西都适合在第一个1024像素（因为我现在告诉它不能超过1024，我不想）。主div的填充工作，所以谢谢你！ – kia4567 2012-03-20 22:28:11

到目前为止，对于视口脚本，我没有运气，或者至少在我的iPhone上。当我使用这个它再次放大。所以我不确定它为什么这样做。我的男朋友有一个机器人，我让他一直在测试它，到目前为止，无论我做什么，它总是为他放大。有什么建议？ – kia4567 2012-03-20 22:29:51

更新我的答案，输入有点太快，对不起。 – 2012-03-21 00:12:07

使用视口有友好的移动网站

回答

相关问题