HTML / CSS：移动设备中的表字体大小不同

发布时间：2020-12-14 16:39:10 所属栏目：资源来源：网络整理

导读：我想有一个简单的网站,可以在桌面和移动浏览器上工作,并遇到一个奇怪的(菜鸟)问题：当我有一个表的列文本长度不同时,移动设备中呈现的字体大小是显着不同的.知道为什么会这样,以及什么是快速和干净的解决方案？在此先感谢您的帮助！ HTML代码： !DOCTYPE htm

我想有一个简单的网站,可以在桌面和移动浏览器上工作,并遇到一个奇怪的(菜鸟)问题：当我有一个表的列文本长度不同时,移动设备中呈现的字体大小是显着不同的.知道为什么会这样,以及什么是快速和干净的解决方案？在此先感谢您的帮助！

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>

在桌面浏览器上渲染没问题

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

解决方法

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

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

有关视口的详细信息及其使用方式的完整说明,您可以访问Apple Developer最初为Safari Mobile引入的文章Configuring the Viewport.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!