个人中心
gpt4 book ai didi

HTML/CSS : table font size different in mobile device

转载 作者：太空狗 更新时间：2023-10-29 13:13:19 25 4
gpt4 key购买 nike

我想要一个既能在桌面浏览器又能在移动浏览器上运行的简单网站，但遇到了一个奇怪的(菜鸟)问题:当我有一个表格，其列文本的长度不同时，在移动设备上呈现的字体大小是截然不同。知道为什么会发生这种情况，什么是快速而干净的修复方法？预先感谢您的帮助!

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>

在桌面浏览器上呈现正常

desktop

移动浏览器(chrome 模拟器)上的字体大小奇怪

mobile

最佳答案

您需要考虑设置应用程序的视口(viewport)。要制作适合移动设备的 Web 应用程序，您需要在标题中进行设置。您可以通过添加 <meta> 来实现在你的 <head> 之间标记标签。这是一个例子:

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

有关什么是视口(viewport)及其使用方法的完整说明，您可以访问文章 Configuring the Viewport来自 Apple Developer，因为它最初是为 Safari Mobile 引入的。

关于HTML/CSS : table font size different in mobile device，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27074259/

25 4 0
文章推荐： javascript - Canvas 加载事件未触发
文章推荐： Android Wearable Message API 根本不起作用
文章推荐： javascript - 纯 HTML AJAX 网站中的页面加载替代方案
文章推荐： android - 如何在CSV文件中转义逗号，android