求助。有人能告诉我如何使用CSS中的媒体查询来实现三星S6更好的响应性吗?
@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (-webkit-min-device-pixel-ratio : 3) { // 在这里编写代码 }
我可以在哪里测试三星S6的响应式设计?有在线链接或工具吗?
求助。有人能告诉我如何使用CSS中的媒体查询来实现三星S6更好的响应性吗?
@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (-webkit-min-device-pixel-ratio : 3) { // 在这里编写代码 }
我可以在哪里测试三星S6的响应式设计?有在线链接或工具吗?
:
@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
希望这可以帮到你。
我建议您使用以下代码:
/* 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。
Chrome开发者工具可以让您在不同的屏幕尺寸上测试查询。打开开发者控制台(F12),然后单击“切换设备模式”按钮(小屏幕图标)。您可以选择您的设备或手动设置屏幕尺寸。对于Galaxy S6,尺寸为360x640。