如何让 CSS 媒体属性在移动设备上工作？答案

【问题标题】：How to get CSS media attributes to work on mobile devices?如何让 CSS 媒体属性在移动设备上工作？
【发布时间】：2022-11-01 20:01:45
【问题描述】：

我为网站编写了一些 HTML 和 CSS，以及一些媒体查询以在屏幕缩小时重新格式化代码。当我缩小浏览器窗口大小时，这适用于浏览器，但不适用于移动设备。谁能想到为什么？请参阅下面的媒体 CSS：

@media screen and (max-width:500px) {
  #education-table td {
    display: block;
    text-align: center;
  }
}

提前致谢！

我看过类似的问题，因此添加了“屏幕和”，但这并没有解决问题，

【问题讨论】：

【解决方案1】：

此代码是有效的 CSS，并且可以按预期工作。它仅适用于屏幕小于 500 像素的设备。我建议您将大小设置为更高的值，例如768px。

screen and 只是确保样式仅应用于普通屏幕，而不应用于打印视图或其他任何内容。

【讨论】：

【解决方案2】：

正如其他人所提到的，您的代码是正确的，应该可以在手机上运行，这取决于它们的屏幕尺寸。

如果您想重新格式化手机的纵向布局，而与屏幕宽度无关，您可能需要考虑以下事项：

@media screen and (orientation: portrait) {
  #education-table td {
    display: block;
    text-align: center;
  }
}

【讨论】：