在 Android 浏览器的屏幕上保留文本答案

【问题标题】：Keeping text on the screen in Android's browser在 Android 浏览器的屏幕上保留文本
【发布时间】：2011-08-02 09:30:02
【问题描述】：

我正在尝试调整 Dokuwiki 模板以供个人使用。我遇到的一个问题是，当我在 Android 的默认浏览器中访问它并缩放文本时，一些工具链接不在屏幕上——我必须反复滑动才能看到它们。尽管文本的其余部分在其增大的大小下可以很好地换行，并且它不使用绝对定位（它确实使用了固定定位，但只是垂直定位，我下面的演示根本没有）。

在 Chromium（和 Firefox）中，调整窗口大小或文本不会将文本推到视野之外。

我已经整理了一个演示问题的最小示例。这是 XHTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en"
      lang="en"
      dir="ltr">
  <head>
    <title>test</title>
    <link rel="stylesheet" href="./css_1.css" />
  </head>
  <body>
    <h1>Heading</h1>
    <div id="tools">
      <ul>
        <li>Menu Item</li>
      </ul>
    </div>
    <p>
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
    </p>
  </body>
</html>

...和 CSS：

#tools {
    float:right;
    text-align:right;
    margin-bottom:2.1em;
}

文本段落调整大小并正常换行，Menu Item 文本在缩放后最终离开屏幕。

【问题讨论】：

标签： android css xhtml css-float android-browser

【解决方案1】：

当您放大 Chrome 或 Firefox 时，会增加文本大小，而与缩放图像无关。浏览器尝试按原样在窗口中呈现调整后的内容，仅在需要时添加滚动条。 Android 中与此最接近的类比称为“文本大小”，可以通过浏览器应用程序的设置选项菜单项进行配置。

当您放大标准 Android 浏览器时，这更像是一种“放大镜”效果，一致地增加了所有内容的可见尺寸，您需要通过手势平移才能看到所有内容。页面并没有真正改变，就像通过放大镜看一张纸并没有改变纸或上面写的东西一样。

（除非您通过放大镜在纸上训练太阳光线——这方面的证据留给读者作为练习）

可以想象，在 Android 浏览器中缩放时会触发一些 Javascript 事件，但我不希望有办法通过 CSS 对缩放做出反应，尽管您应该能够对文本大小的变化做出反应通过 CSS。

【讨论】：

如果这是真的，为什么其余的文本会重排？我不需要平移来阅读正文——它被包裹在不同的点，所以我只需要垂直滚动。
@detly：我无法在我尝试的任何网页上重现您的行为。如果你有一个展示你的效果的链接，请发布它。
这是我的演示：heeris.id.au/test/start.xhtml ... 请注意，当您在普通 Android 浏览器上捏缩放时，主文本会重新换行，但菜单项会成比例地远离。
@detly：行为因设备而异。在 DROID、XOOM 和 Galaxy Tab 上，行为与我描述的一样（缩放，无回流）。在 EVO 4G 上，行为如您所描述（回流）。由于某些奇怪的原因，我根本无法在 Nexus S 上加载您的页面。
我在“Google APIs”虚拟设备、“Android 2.2”虚拟设备和物理 HTC Desire 上得到了我描述的行为。坚果。（另外，也许 Nexus S 不喜欢 xhtml 扩展。）