HTML/CSS: размер шрифта стола, отличный от мобильного устройства

Я хотел бы иметь простой веб-сайт, который работает как на настольном, так и на мобильном браузере, и столкнулся с странной (новичкой) проблемой: когда у меня есть таблица, тексты столбцов которой имеют разную длину, размер шрифта, отображаемый на мобильном устройстве, резко отличается. Любая идея, почему это происходит, и что такое быстрое и чистое исправление? Заранее благодарим за помощь!

Код HTML:

<!DOCTYPE html>
<html>
  <head>
    <style>
     body {
       font-family: Verdana, Geneva, Arial, sans-serif;
       font-size: medium;
     }
     table, td {
       border: 1px solid black;
     }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Short text. Short text</td>
        <td>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. </td>
      </tr>
    </table>
  </body>
</html>

В браузере рабочего стола отображается хорошо

Странный размер шрифта в мобильном браузере (хром-эмулятор)

Ответ 1

Вы должны рассмотреть возможность установки области просмотра своего приложения. Чтобы создать мобильное веб-приложение, вам нужно установить его в своих заголовках. Вы можете сделать это, добавив тег <meta> между вашими тегами <head>. Вот пример:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Полное описание того, что такое область просмотра и как она используется, можно найти в статье Настройка области просмотра от Apple Developer, как она была впервые представлена в Safari Mobile.

Ответ 2

попробуйте это

 body {
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 15px;
}