android - 将文本保留在 Android 浏览器的屏幕上

标签 android css xhtml css-float android-browser

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

在 Chromium(和 Firefox)中,调整窗口或文本的大小不会将文本推出 View 。

我整理了一个演示问题的最小示例。这是 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 文本在缩放后最终离开屏幕。

最佳答案

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

当您放大标准 Android 浏览器时,这更像是一种“放大镜”效果,会同时增加所有内容的可见大小,您需要通过手势进行平移才能找到所有内容。页面并没有真正改变,就像通过放大镜看一张纸并不会改变纸或上面写的内容一样。

(除非你通过放大镜在纸上训练太阳光线——证明这一点作为练习留给读者)

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

关于android - 将文本保留在 Android 浏览器的屏幕上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5610391/

相关文章:

javascript - 使用 JS 更改 svg 的 css 填充

html - 如何在图像周围添加边框

java - 无法解决依赖关系conciseclock

android 波纹效果不工作

android - 将音频编码为 AAC 会产生较慢的音频 - Android

html - css 伪元素扩展到所有屏幕尺寸的整个页面宽度

android - 自定义 ImageView 在 Nexus 7 上自动调整大小

html - 防止文本扩展包装

xml - 我如何强制浏览器呈现文件 XHTML5,HTML5 的 XML 序列化?

css - 表 { 边框折叠 : separate; } or table { border-collapse: collapse; }