Question

请帮助。任何机构都可以告诉我有关三星s6的CSS中的媒体查询更具响应性吗？

@media only screen and 
(min-device-width : 360px) and 
(max-device-width : 640px) and 
(-webkit-min-device-pixel-ratio : 3) { // code here }

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

Answer 1

我试过这个：

{{1}}

它似乎有效。适用于S6和S7。我认为这是因为三星S6和S7的尺寸是1440x2560：

1440/4 = 360
2560/4 = 640

希望得到这个帮助。

Answer 2

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

Answer 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 ，Samsung Galaxy S4，Samsung Galaxy S5，Samsung Galaxy S6，Samsung Galaxy S7，Samsung Galaxy S8，Samsung Galaxy S9

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

三星s6的CSS媒体查询

3 个答案: