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)

我将它用于视口

<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）

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

1 个答案: