Safari不基于媒体查询呈现CSS，但在

Question

更新：链接到实际文件：https://fikers.github.io/projects/entrepreneur21/index.html

我使用一些JavaScript从一些外部数据创建表行，然后将它们添加到我的页面。对于不同的屏幕尺寸，我会移动一些元素。对于Chrome，一切正常，但出于某种原因，对于Safari，似乎有两件事情发生：

1）如果我以较大的宽度加载页面然后将其缩小，则会弄乱元素。基本上，它不是使用应该以较小宽度应用的新CSS，而是围绕这些元素移动，就好像我没有媒体查询一样。

与此同时，如果屏幕最初加载到一定宽度以下，页面就像上面的情况一样混乱了，好像我用一个大的装载了它并试图让它变小并且一切都搞砸了。 / p>

2）正如我所说的，我在开始时使用JavaScript来创建表行并将它们动态添加到页面中。为了使页面看起来适合较小的尺寸，我实际上将2个表行数据项合并为一行（宽度小于50％，每个行内嵌块显示在同一行上）。我还使表格标题在较小的宽度上消失。从图4中可以看出，如果从较小的宽度到较大的宽度，链接列中的a href元素（如果增加宽度，则会以较小的宽度移动）不会重新弹回到位 - 这只适用于Safari（网络和移动设备）。

我怎样才能基本上强制Safari检查页面宽度是什么，然后重新渲染它或者这里的最佳解决方案。

以下是不同宽度的不同屏幕上的外观截图：

Safari初始加载宽度小

Chrome中加载的页面宽度相同，这就是它应该显示的方式

如果从最初的宽度开始

，它在大范围宽度上适用于Safari和Chrome

在Safari上，如果您从较小的宽度开始并将其放大。