Если ширина экрана меньше 700px, он должен добавить еще одну таблицу стилей CSS, используя mediaqueries ... но это не так

Question

Я использую другую таблицу стилей для смартфонов и экранов меньшего размера, используя <link rel="stylesheet" type="text/css" media="only screen and (max-width: 700px)" href="/smartphones.css" />

Дело в том, что в моем браузере все работает нормально (когда я уменьшаю окно или когда я использую сайт, который эмулирует устройства меньшего размера), но это не работает, когда я пытаюсь получить доступ к своему сайту с помощью телефона , Я попробовал использовать HTC Wildfire (240x320 px) и настроил таблицу стилей smartphones.css так, чтобы она вызывалась, если экран меньше 700px.

Я удалил кеш, и я даже попробовал с парой других телефонов ... он все еще кажется полной, нормальной, крупноформатной версией окна моего сайта.

Есть мысли о том, что может быть не так?

Сайт liganet.net

*

спасибо !! * 1012

Answer 1

Возможно, ваш смартфон не сообщает вашему веб-сайту, что его размеры экрана невелики. Это случается со смартфонами иногда. Мой HTC Wildfire прокручивает окно и сохраняет его большим, вместо того, чтобы сообщать веб-сайту, что ему нужно передать уменьшенную версию.

Возможно, вам следует проверить заголовки HTTP для User-Agent вместо того, чтобы полагаться на размер экрана.

Answer 2

эй, просто добавьте это в тег

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

и оно будет работать.