HTML / CSS：表格字体大小在移动设备中不同 [英] HTML/CSS: table font size different in mobile device
问题描述
我希望有一个可以在台式机和移动浏览器上运行的简单网站，并遇到一个奇怪的（新手）问题：当我有一个表的列文本长度不同时，在移动设备中呈现的字体大小为截然不同。知道为什么会这样吗？什么是快速彻底的修复？预先感谢您的帮助！
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
< img src = https://www.dropbox.com/s/csh2j3o036wv553/html-css-table-font-size-desktop.png?dl=1 alt = desktop>
移动浏览器（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>
有关什么是视口及其使用方式的完整说明，您可以访问文章< a href = https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW26 rel = nofollow noreferrer从Safari移动版首次引入的Apple Developer中>配置视口。
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：表格字体大小在移动设备中不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
