为什么 table 宽度和文本大小相对于彼此的缩放比例不同？

Question

这是一个屏幕宽度为1000px的网站截图：

这是同一网站的屏幕截图，屏幕宽度为 460px"

注意第一张图片，无序列表的宽度 "smaller" 比 table 宽。但是在第二张图片中，无序列表的宽度 "larger" 比 table 宽。

这是有问题的网站： {{ 编辑：Link 不再与此问题相关，已删除}}

我喜欢该页面在桌面上的显示方式（也就是顶部更宽的屏幕截图）。但是在移动设备上，一切的规模似乎都不对。文本比 table.

中的文本（相对）大得多

为什么会这样？我该如何解决才能使移动网站和桌面网站看起来一样？

编辑：图像是使用 Inspector 中的 Chrome 的 "Screenshot" 工具拍摄的。不过，我确实使用我的实际手机 phone 验证了行为是一致的。

Answer 1

可能需要这一行

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

更新答案：我正在更新我的答案，因为我刚刚意识到 OP 没有在任何地方设置字体大小，这实际上就是这里的问题。他希望字体在所有分辨率下始终保持相同，为此您需要在样式标签中设置 font-size，如下所示：

font-size: 12px;

如果您只是将其设置在 body 内，那么所有内容的整个文本大小都将相同，因此您可能需要为 html 代码的每个部分添加更多样式标签如果您想要不同部分的不同尺寸（例如标题文本、table 文本等）。我仍然会参考下面的旧答案，因为您可能想考虑在某些时候让此页面稍微响应至少以便于查看，但这只是我的意见。

旧答案：

好吧，如果您从您使用的相应浏览器查看页面源代码，请查看那里的代码。那里似乎没有太多样式（没有 css 样式表链接到该页面）。该页面的唯一样式就在标签中：

        <style>
            body {
                font-family: sans-serif;
            }

            input {
                font-family: monospace;
            }
            /*
            .contentwrap {
                border: solid 10px red;
            }
            .contentwrap table {
            #width:90%;
            }
            .contentwrap ul {
                display: 
                #width:50%;
                font-size: .9em;
            }*/
        </style>

所以我的观点是，没有任何内容告诉该页面如何针对不同的 resolutions/devices/screens 相应地 style/scale。因此，它将默认为设备本机使用的任何内容。

我建议创建一个 stylesheet.css 文件并链接到它，因为如果您不想弄乱您的屏幕，您将需要在其中为不同的媒体屏幕放置一堆属性用它标记。如果您不了解如何在 CSS 中使用媒体查询，您可以在此处查看此问题及其解决方案： css for different screen resolutions?

Answer 3

看起来这是由于 CSS 属性造成的：

text-size-adjust

我在 HTML 级别将其设置为 100% 并解决了问题：

html { text-size-adjust: 100%; }

这对我来说已经解决了。但请注意 text-size-adjust 的支持相当有限：

https://caniuse.com/#feat=text-size-adjust

为什么 table 宽度和文本大小相对于彼此的缩放比例不同？

Why do the table width and text size scale differently relative to each other?

html

css

width