居中位置：固定在移动浏览器上缩放不正确

Question

我在页面顶部有一个徽标，该徽标必须相对于文本居中并固定在视口的顶部，如下例所示：http://dev.markbrouwers.nl/test.html

<h1 style="width: 200px; height: 100px; margin: 0 auto;">
    <img src="images/logoforeground.png" style="position: fixed; display: block;" alt="Page title">
</h1>
<div style="width: 800px; margin: 0 auto;">
    <p>content</p>
</div>

它完美适用于PC机。然而，在移动浏览器上，当缩放时，徽标开始从中心漂移。 我已经阅读了很多关于在iOS上固定的位置的东西（例如this），显然从iOS 5和Android 2.2开始它应该可以工作，认为它没有...它仍然漂移...有谁知道如何让移动webkit像个人电脑浏览器一样？

[编辑]

我编辑了一下html，h1现在在容器外面

我还在iPhone和Windows上制作了截图。正如您所看到的，当您放大iOS时，徽标会从视口中漂移。在Chrome浏览器中，它位于视口的顶部中间。

Safari / iOS5截图

Chrome / Win7屏幕截图

Answer 1

发生这种情况的原因是，移动设备需要知道页面的宽度，即使页面的宽度是340px，例如你仍会遇到这个问题，这是因为你的ZOOMING，而不是调整大小。

如果您希望文本更大的用户，最好的解决方案是如下所示：

两个按钮小/大

然后将这些按钮链接到某些javascript，然后根据您的需要更改文本大小。

例如当点击大时，你可能希望它转到24px 当他们点击小时，它会转到14px。

这是简单的javascript