Блог

Я делаю сайт адаптивным для всех устройств. Я тестировал его на устройствах Samsung 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;}

 }
 

попробуйте

 @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 на своем телефоне)