英文:
Why is there a different font size within tables, only, on mobile device?
问题
在以下HTML示例中，我们有常规文本和包含文本的表格。在桌面模式下，常规文本和表格的文本之间的字体大小相匹配。但如果您在移动设备上查看它（或通过DevTools的响应式模式），则表格的文本字体大小较小：
<html>
<body>
这里是普通文本！这里是普通文本！这里是普通文本！这里是普通文本！这里是普通文本！这里是普通文本！这里是普通文本！这里是普通文本！这里是普通文本！这里是普通文本！这里是普通文本！这里是普通文本！这里是普通文本！这里是普通文本！这里是普通文本！这里是普通文本！
<table>
<tr>
<td>列中的文本</td>
</tr>
</table>
</body>
</html>
不幸的是，这无法在jsfiddle等地方重现，但如果您将这个HTML保存到本地文件中，然后在Chrome中打开并通过DevTools切换到移动模式，那么它就可以被重现：
这是为什么以及如何规避这个问题的原因？
英文:
In the following HTML example, we have usual text and a table with text. In desktop mode, the font sizes between the usual text and the table's text match. But if you view it on a mobile device (or in responsive mode via DevTools), the font size of the table's text is smaller:
<html>
<body>
Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text!
<table>
<tr>
<td>Text in the column</td>
</tr>
</table>
</body>
</html>
Unfortunately, this cannot be reproduced on jsfiddle/etc., but if you store this HTML into a local file, open it in Chrome and switch to mobile mode via DevTools, then it can be reproduced:
What's the reason for that and how can it be circumvented?
答案1
得分: 1
我不认为你发布了足够的代码，但尝试使用媒体查询来针对特定设备进行定位。您可以在jsfiddle.net上发布复制问题的代码。
媒体查询示例：
@media only screen and (min-width: 275px) {
...这里放置CSS代码...
}
@media only screen and (min-width: 769px) {
...这里放置CSS代码...
}
英文:
I don't think you posted enough code, but try using media queries to target specific devices. You can post the code to duplicate the issue on jsfiddle.net
Media Query Examples
@media only screen and (min-width: 275px) {
...css here...
}
@media only screen and (min-width: 769px) {
...css here...
}
答案2
得分: 0
那个原因是，显然，对于移动设备支持，您需要在头部至少提供以下特殊元数据：
<meta name="viewport" content="width=device-width, initial-scale=1">
否则，在某些情况下（例如表格），它会表现出奇怪的行为。
对于在台式电脑上查看页面，width=device-width 元标签并不绝对必要，因为台式浏览器通常不会根据设备的屏幕大小或像素密度来缩放页面。相反，它们通常以设计尺寸相同的大小显示页面，而不考虑用于查看的设备。
相比之下，移动设备可以具有各种不同的屏幕尺寸和像素密度，一些移动浏览器的默认行为是缩小以显示页面的整个宽度。这可能使表格中的文本看起来非常小而难以阅读。通过包括 width=device-width 元标签，浏览器被指示将页面缩放到设备屏幕的宽度，这有助于提高表格中的文本可读性。
英文:
The reason is, that obviously for mobile devices support you need to provide at least this special metadata in the header:
<meta name="viewport" content="width=device-width, initial-scale=1">
Otherwise, it behaves odd in some constellations (e.g. tables).
The width=device-width meta tag is not strictly necessary for viewing the page on a desktop PC because desktop browsers typically do not scale the page based on the screen size or pixel density of the device. Instead, they typically display the page at the same size as it was designed, regardless of the device being used to view it.
In contrast, mobile devices can have a wide range of screen sizes and pixel densities, and the default behavior of some mobile browsers is to zoom out to show the full width of the page. This can make text within tables appear very small and difficult to read. By including the width=device-width meta tag, the browser is instructed to scale the page to the width of the device's screen, which can help to make the text in tables more legible.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论