三星 s6 的 CSS 媒体查询答案

【问题标题】：CSS media queries for Samsung s6三星 s6 的 CSS 媒体查询
【发布时间】：2016-02-06 02:03:37
【问题描述】：

请帮忙。任何人都可以告诉我有关 CSS 中的媒体查询以提高三星 s6 的响应速度吗？

@media 仅屏幕和（最小设备宽度：360px）和（最大设备宽度：640 像素）和 (-webkit-min-device-pixel-ratio : 3) { // 代码在这里 }

我可以从哪里测试三星 s6 的响应式设计？请问有什么在线链接或工具吗？

【问题讨论】：

标签： css responsive-design media-queries

【解决方案1】：

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

【讨论】：

谢谢马特。但列表中没有适用于三星 Galaxy s6 的设备。
但 360x640 无法正常工作，并且在开发者控制台中 Galaxy S6 不在列表中
阿里：S6 的 CSS 分辨率也是 360x640，和 S4 一样。
我花了一段时间才找到它 - 电话选择位于浏览器的顶部，而不是在“开发区”中。谢谢，非常漂亮。

【解决方案2】：

我试过这个：

@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

希望对您有所帮助。

【讨论】：

【解决方案3】：

我建议您使用以下代码：

/* 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 */
}

如果您锁定它们的完整列表，请查看此link，您会发现以下设备：智能手机、iPad、iPad 3、iPhone 4、iPhone 5、iPhone 6、iPhone 6+、三星 Galaxy S3、三星银河 S4，三星银河 S5，三星银河 S6，三星银河 S7，三星银河 S8，三星银河 S9

有关更多信息，请查看此link 并查看此link

【讨论】：