0

我在页面顶部有一个徽标，该徽标必须相对于文本居中并固定在视口顶部，如下例所示： 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 的行为类似于 pc 浏览器？

[编辑]

我稍微编辑了html，h1现在在容器之外

我还在 iPhone 和 Windows 上做了截图。如您所见，当您在 iOS 上放大时，徽标会偏离视口。在 chrome 浏览器中，它位于视口的顶部中间。

Safari/iOS5 截图： 在此处输入图像描述

Chrome/Win7 截图： 在此处输入图像描述

4

1 回答 1

0

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

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

两个按钮小/大

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

例如，当单击大时，您可能希望它变为 24px，而当他们单击小时，它变为 14px。

这是简单的javascript

于 2012-11-14T01:30:35.640 回答