Хранение текста на экране в браузере Android

Я пытаюсь адаптировать шаблон 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 текст заканчивается за пределами экрана после увеличения.

Источник

1 ответ

При увеличении Chrome или Firefox это увеличивает размер текста независимо от масштабирования изображений. Браузер пытается отобразить скорректированный контент в окне как есть, добавляя полосы прокрутки только при необходимости. Самая близкая аналогия с этим в Android называется "размер текста", и ее можно настроить с помощью пункта меню "Параметры" приложения браузера.

Когда вы увеличиваете масштаб в стандартном браузере Android, это скорее эффект "увеличительного стекла", увеличивающий видимый размер всего в унисон, и вам нужно будет перемещаться с помощью жестов, чтобы добраться до всего. Страница на самом деле не изменилась, так же, как взгляд на лист бумаги через увеличительное стекло не меняет бумаги или того, что на ней написано.

(если вы не натренируете солнечные лучи на бумаге через увеличительное стекло - доказательство этому оставлено в качестве упражнения для читателя)

Вполне возможно, что есть некоторые события Javascript, которые запускаются при увеличении в браузере Android, но я не ожидаю, что будут способы реагировать на масштабирование с помощью CSS, хотя вы должны иметь возможность реагировать на изменения размера текста с помощью CSS.

Источник
Другие вопросы по тегам