html - 在开发人员工具中测试响应能力时，网站 react 完美，但不是以实际手机屏幕为中心？

Question

所以我有一个网站，在开发人员工具中测试响应能力时看起来很棒，但在 iPhone 本身上实际测试时却没有居中并且看起来有些破烂。

什么会导致这种情况，如果我无法使用 iPhone(在我的 android 上看起来不错)，我该如何解决？

See site here

Answer 1

这个规则中的填充是罪魁祸首，当你摆脱它时你会看到不同之处:

@media screen and (max-width: 600px)
.tg-column-1, .tg-column-2, .tg-column-3, .tg-column-4 {
    float: none;
    padding-left: 34%;
}

要使 text-widget 的元素居中，您可以试试这个而不是您使用的填充:

@media screen and (max-width: 600px)
   .textwidget div { margin: 0 auto; }
}