微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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>

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

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

解决方法

您需要考虑设置应用程序的视口.要制作适合移动设备的Web应用程序,您可能需要在标题中进行设置.您可以通过添加< Meta>来实现.您的< head>之间的标记标签.这是一个例子:
<head>
    <Meta name="viewport" content="width=device-width,initial-scale=1">
</head>

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

原文地址:https://www.jb51.cc/html/227151.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐