Медиа-запрос для мобильных устройств (смартфоны и планшеты)

Question

Я хочу сделать 2 версии своего сайта, одна предназначена для настольных компьютеров (ПК и ноутбуков), а другая - для мобильных устройств (смартфонов и планшетов). Я прогуглил это и прочитал несколько статей о медиа-запросах. Поэтому я поместил этот медиа-запрос в свой дизайн (в основном на основе этой ссылки):

/* For mobile and smartphones */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/*style*/
}

/* For tablet */ 
@media only screen and (min-device-width : 768px) {
/*style*/ 
}

/* For iPhones */ 
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and
 (min-device-pixel-ratio : 1.5) { 
/*style*/ 
}

Я проверил это на нескольких устройствах. Он хорошо работает на мобильных устройствах и смартфонах (я пробовал его на нескольких смартфонах, таких как xperia, Samsung Galaxy Mini и Nexus 4), но, очевидно, он не работал на планшетах (я пробовал на Nexus 7 и вкладке Galaxy). Когда я открываю веб-сайт на планшетах, он показывает версию для ПК вместо мобильной версии. Есть идеи, как это происходит? Спасибо:-)

Answer 1

У вас было:

<meta name="viewport" content="width=device-width, initial-scale=1">

в шапке сайта? Этот код отключит эффект масштабирования на планшетах, и, вероятно, ваши медиа-запросы будут работать:)

дай мне знать!