Как я могу исключить CSS с мобильных устройств

Question

У меня есть несколько CSS-спрайтов на главной странице моего сайта.При наведении курсора на элемент появляется другое изображение.

Это нормально работает на обычном рабочем столе, однако на мобильном устройстве (в частности, на iPhone или iPad) элементы для состояния наведения отображаются в стеке ниже изображения по умолчанию.

Есть ли способ, которым я могу сказать, только наведите курсор мыши на устройство не на рабочем столе.

Я просматривал свойства max-device-width для медиазапросов, но это не совсем то, что я хотел.Например: что, если настольный браузер изменяет размеры окна, то зависания не будут работать.

<style media="screen">
#main{
 width: 985px;
 height: 1078px;
 background: url(../images/main.jpg);
 margin: 0px; 
 padding: 0;
 position: relative;
}

#main li {
 margin: 0; 
 padding: 0; 
 list-style: none;
}

#mainSection1 a { left: 642px; width: 193px; top: 282px; height: 18px; position: absolute; }
#mainSection1 a:hover { background: url(../images/main.jpg) -642px -1360px; }

</style>

Answer 1

Насколько я знаю, размер окна браузера не должен запускать CSS, защищенный условиями max / min-device-width.Это будет запускать CSS, защищенный с максимальной / минимальной шириной, хотя.Однако ваше разрешение экрана может вызывать разделы ширины устройства.

Но это не будет вашей единственной проблемой.Дело в том, что логическая единица px в CSS не всегда соответствует физическому количеству пикселей.Если вы устанавливаете начальный масштаб на 1 в метатеге области просмотра, на телефонах Android с разрешением 800x480 и iphone4 все может выглядеть больше, чем нужно.

Вы можете использовать отношение устройства к пикселям в медиазапросеизолировать эти устройства.Я думаю, что iphone4 device-pixel-ratio составляет 2.

Я знаю, что ни одно из вышеперечисленного само по себе не дает вам прямого решения, но вы можете попробовать объединить их, чтобы выяснить, что работает для вас.