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

本文介绍了HTML / CSS：表格字体大小在移动设备中不同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！我希望有一个可以在台式机和移动浏览器上运行的简单网站，并遇到一个奇怪的（新手）问题：当我有一个表的列文本长度不同时，在移动设备中呈现的字体大小为截然不同。知道为什么会这样吗？什么是快速彻底的修复？预先感谢您的帮助！I would like to have a simple website that works both on desktop and mobile browser, and encountered a weird (rookie) problem: when I have a table whose column texts are of different length, the font sizes rendered in mobile device are dramatically different. Any idea why this is happening and what is a quick and clean fix? Thanks in advance for your help! 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>在桌面浏览器上可以渲染Renders okay on desktop browser移动浏览器（chrome仿真器）上的字体大小奇怪Weird font size on mobile browser (chrome emulator)推荐答案您需要考虑设置应用程序的视口。要制作适合移动设备的Web应用程序，您需要在标题中进行设置。为此，您可以在< head> 标签之间添加< meta> 标签。例如：You need to consider setting the viewport of your application. To make a mobile-friendly web application, you will need to set this in your headers. You can do so by adding a <meta> tag between your <head> tags. Here is an example:<head> <meta name="viewport" content="width=device-width, initial-scale=1"></head>有关什么是视口及其使用方式的完整说明，您可以访问文章配置视口。For a full description of what a viewport is and how it is used, you can visit the article Configuring the Viewport from Apple Developer as it was first introduced for Safari Mobile. 这篇关于HTML / CSS：表格字体大小在移动设备中不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！