Почему не подключаются стили для мобильной версии сайта?

Question

[Лоло]

Приветствую.

Такой вопрос:

<link rel="stylesheet" media="all and (orientation:landscape)" href="{% static 'css/reg_vhod/reg_vhod.css' %}">
    <!-- телефонная версия -->
    <link rel="stylesheet" media="all and (orientation:portrait)" href="{% static 'css/reg_vhod/tel/reg_vhod.css' %}">

Почему это не работает ? Подключается всё время только версия для большого экрана?

Comments

[Ivan Bogachev]

Думаю стоит уточнить: как вы проверяете, что "телефонная" версия подключается или не подключается? На реальном телефоне? Не закешировались ли эти стили?

P.S.: И да, это скорее не "телефонная", а "вертикальная". Телефон, как и монитор компьютера, можно повернуть.

[Ankhena]

Во-первых,

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

Во-вторых, вьюпорт телефона отличается от вьюпорта декстопа не ориентацией, а размером. Ведь можно и браузер сжать и экран повернуть.
В-третьих, обычно разумнее писать @media в самом css, а не подключать разные версии файлов.

Answer 1

[ru_katya]

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

- вставь в head.