CSS 样式的 iPhone 6/7 屏幕宽度实际上是多少？答案

【问题标题】：What is actually the iPhone 6/7 screen width for CSS styles?CSS 样式的 iPhone 6/7 屏幕宽度实际上是多少？
【发布时间】：2016-11-08 00:14:45
【问题描述】：

我读到 iPhone 6/7（S 或不是）的浏览器宽度为 375 像素。

但是，我正在编写一个简单的@media 查询，如下所示：

@media only screen and (max-width : 375px) {
    ....
}

我发现直到我将最大宽度增加到正好 980 像素才起作用。这是为什么呢？

如何进行@media 查询，将手机视为 375 像素？我不在乎屏幕分辨率有多密集，它是一部小型手机，我想应用一个假网页设计，而不破坏分辨率约为 1000 像素的平板电脑或小型笔记本电脑等设备的设计。

理想情况下，它应该与col-xs-X bootstrap 的样式一起使用。

【问题讨论】：

您是否打开了 DevTools 以查看可能导致问题的原因？你真的应该根据内容而不是特定的设备、产品或品牌来创建突破点。
好奇：你为什么使用最大宽度而不是最小宽度？
你的meta viewport 行说什么？
@ChrisYongchu，我设计的是面向内容的，而不是面向设备的。但是，当我在手机上对其进行测试时，我意识到所应用的 Bootstrap 样式是 col-sm-* (min-width:768)，而不是 col-xs-*。我使用 DevTools 来找出这些东西。
@Alohci 我没有。我在您的链接中读到“如果您使用响应式设计对网站进行编码以便很好地适应 iPhone，如果您不告诉设备不要放大，您可能会遇到一些尺寸问题。”我添加了<meta name="viewport" content="initial-scale=1.0">，现在它工作正常。如果你把它作为一个答案，我会接受它。虽然，我最初的问题仍然是个谜。

【解决方案1】：

肯定有另一个媒体查询或默认样式覆盖它。

您的媒体查询是正确的，但请始终确保您的媒体查询位于 style.css 文件的最后（或任何名称）。

【讨论】：