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

前端之家收集整理的这篇文章主要介绍了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.

猜你在找的HTML相关文章