三星S6的CSS媒体查询

Question

求助。有人能告诉我如何使用CSS中的媒体查询来实现三星S6更好的响应性吗？

@media only screen and 
(min-device-width : 360px) and 
(max-device-width : 640px) and 
(-webkit-min-device-pixel-ratio : 3) { // 在这里编写代码 }  

我可以在哪里测试三星S6的响应式设计？有在线链接或工具吗？

- Ali

Answer 1

我已经尝试过这个：

：

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px)
  and (-webkit-min-device-pixel-ratio : 4) 
  and (-webkit-device-pixel-ratio : 4)
  and (orientation: portrait) {

/* CSS GO HERE */

}

看起来似乎有效。对于S6和S7，我认为这是因为三星S6和S7的尺寸为1440x2560：

1440 / 4 = 360
2560 / 4 = 640

希望这可以帮到你。

- PalmThreeStudio

Answer 2

我建议您使用以下代码：

我建议您使用以下代码：

/* Samsung Galaxy S6, S6+, S7, S7+ | 1440×2560 pixels ----------- */
/* Portrait and Landscape */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
    /* Styles */
}

/* Landscape */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 4) {
    /* Styles */
}

/* Portrait */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 4) {
    /* Styles */
}

如果您正在寻找完整列表，请查看此链接，您将找到以下设备：智能手机、iPad、iPad 3、iPhone 4、iPhone 5、iPhone 6、iPhone 6+、三星Galaxy S3、三星Galaxy S4、三星Galaxy S5、三星Galaxy S6、三星Galaxy S7、三星Galaxy S8、三星Galaxy S9。

更多信息请查看此链接并检查此链接。

- Nazari

Answer 3

Chrome开发者工具可以让您在不同的屏幕尺寸上测试查询。打开开发者控制台（F12），然后单击“切换设备模式”按钮（小屏幕图标）。您可以选择您的设备或手动设置屏幕尺寸。对于Galaxy S6，尺寸为360x640。

- Matt O

---

谢谢Matt。但是在列表中没有三星Galaxy s6的设备。 - Ali

但是360x640的分辨率不起作用，在开发者控制台中Galaxy S6也不在列表中。 - Ali

阿里：S6的CSS分辨率也是360x640，就像S4一样。 - DarkNeuron

找了一会儿才找到 - 手机选择在浏览器的顶部，而不是“开发区域”中。谢谢，非常流畅。 - Mike_Laird