html - 为什么表格宽度和文本大小相对于彼此的比例不同？

Question

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

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

请注意第一张图片，无序列表比表格宽度“小”。但在第二张图片中，无序列表比表格宽度“更大”。

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

我喜欢该页面在桌面上的显示方式(也就是顶部更宽的屏幕截图)。但是在移动设备上，一切的规模似乎都不对。文本比表中的文本(相对)大得多。

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

编辑:图像是使用 Chrome 检查器中的“屏幕截图”工具拍摄的。不过，我确实使用我的实际手机验证了行为是一致的。

Answer 1

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

font-size: 12px;

如果你只是将它设置在正文中，那么所有内容的整个文本都将具有相同的大小，因此如果你想要不同部分的不同大小(例如如标题文本、表格文本等)。我仍然会引用下面的旧答案，因为您可能想考虑在某些时候使此页面稍微响应，至少以便于查看，但这只是我的意见。

旧答案:

好吧，如果您从您使用的相应浏览器查看页面源代码，请查看那里的代码。那里似乎没有太多的样式(没有链接到该页面的 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>

所以我的观点是，没有任何内容告诉该页面如何针对不同的分辨率/设备/屏幕进行相应的样式/缩放。因此，它将默认为设备 native 使用的任何内容。

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