HTMLCSS:移动设备中的表字体大小不同

HTMLCSS:移动设备中的表字体大小不同,第1张

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

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 / CSS:移动设备中的表字体大小不同全部内容,希望文章能够帮你解决HTML / CSS:移动设备中的表字体大小不同所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1134498.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存