Не работает @media only screen and (max-width: 480px) -- почему?

Question

[sh711]

Использую такой простой код с целью изменения дизайна для мобильных устройств:

@media only screen and (max-width: 480px) { 
	.tooltip  {
    display: none;
	}
}

При ресайзах десктопных браузеров (IE, Chrome, Opera, FireFox) все работает. В режиме разработчика и эмуляции моб устройства в FireFox - работает.
НО в режиме разработчика и эмуляции моб устройства в Chrome и Opera не работает. На Android в стандартном браузере и Chrome не работает.
Что я делаю не так?

Дополню, что с handheld

@media handheld only screen and (max-width: 480px) { 
  .tooltip  {
    display: none;
  }
}

на Android все равно не работает...

Comments

[Сергей ZSA]

а мета vievport есть в html?

[sh711]

Сергей ZSA: не было! спасибо! почему-то в примерах про это ничего не было сказано...

Answer 1

[Андрей Козлов]

Позвольте, так зачем же вам only? Мой лист никаких ошибок при практически идентичной записи

@media screen and (max-width: 736px) {

			#footer {
				bottom: 2em;
				left: 2em;
			}

		}

никаких проблем не выдает.
Попробуйте

@media screen and (max-width: 480px) { 
  .tooltip  {
    display: none;
  }
}