android - CSS -webkit-min-device-pixel-ratio 禁用媒体查询

Question

我正在使网站响应所有设备。我一直在三星 Galaxy 设备上测试它并卡住了。

galaxy S2 的像素比为 1.5，因此我尝试使用像素比检测设备分辨率，但这似乎禁用了媒体查询。

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 320px) {}

媒体查询似乎在没有 webkit 像素比的情况下工作。

(-webkit-min-device-pixel-ratio:1.5)

我将其用于视口(viewport)

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

任何帮助都会很棒，谢谢。

这是媒体查询中的 CSS 代码。

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 320px) {

.menu > li.shopping-bag-item a > i.sf-cart, .mobile-cart-link i.sf-cart {
float: left;
margin-left: -66px;
z-index: 1;
position: absolute;
margin-top: 157px;
width: 80px;
height: 32px;
display: block;
vertical-align: -3px;
/*background: url('/uploads/2014/06/cart.png');*/
}

#main-container{width: 328px;
}

.searchbar2 {
float: left;
margin-left:20px;
}

.searchbar3 input[type="text"] {
 background-color: white;
 border-color: rgba(5, 110, 207, 0.6);
 height: 23px;
 width: 133px;}

.searchsubmit2 input[type="submit"] {
 width: 147px;
 height: 32px;
 float: right;
 border: none;
 color: white;
 background-color: rgba(5, 110, 207, 0.6);}

 #logo {
 /*margin: 10px -89px 5px;*/
 float: none!important;
 width: 259px;
 margin-left: 18px}

 #megaMenu #megaMenuToggle {
 padding: 12px 15px;
 cursor: pointer;
 font-size: 14px;
 text-transform: uppercase;
 text-align: left;
 }

 #main-navigation {
 display: block;
 float: initial;
 margin: 0 20px;
 width: 239px;}

 h4.spb_heading span, h4.lined-heading span {
 width: 282px;}

 }

Answer 1

尝试

@media all and (min-device-pixel-ratio: 1.5) and (max-width: 320px),
@media all and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 320px),
@media all and (min--moz-device-pixel-ratio: 1.5) and (max-width: 320px) {}

或者只是

@media all and (min-device-pixel-ratio: 1.5) and (max-width: 320px) {}

这可能行不通，因为您只针对基于 webkit 的浏览器(您可能在手机上使用 firefox)