Это нормально, что Chrome загружает оба моих адаптивных CSS-файла?

Question

Я пытаюсь загрузить разные CSS-файлы для мобильной и настольной версии моего сайта, например:

<link rel="stylesheet" media="screen and (min-width: 768px)" href="home.css" />
<link rel="stylesheet" media="screen and (max-width: 767px)" href="home-mobile.css" />

Но когда я проверяю Chrome, загружаются оба моих файла.Единственное, что приоритетом home-mobile.css является «Наивысший», а «home.css» - «Наименьший» на малой ширине и наоборот.

Как загружать только «home-mobile.css» на настоящий мобильный телефон?

Answer 1

Я второй ответ Маора Рафаэли, но, возможно, его можно будет загрузить вот так.

if (screen && screen.width < 480) {
    document.write('<link rel="stylesheet" href="home-mobile.css" />;
}

Answer 2

Да, это абсолютно нормально.То, что вы хотите, это иметь какой-то код сниффинга устройства, который будет переключаться между 2 CSS при обнаружении мобильного телефона.если вы используете PHP для бэкэнда, вы можете использовать что-то вроде

$_SERVER['HTTP_USER_AGENT']

для обнаружения агента, но вы не можете полагаться на подобные фрагменты, так как эта информация может быть не установлена ​​в HTTPзаголовок.Мой совет, загрузите ваши файлы, а Maor Refaeli предложил минимизировать их ...

Answer 3

Это ожидаемое поведение.
Выполнив то, что вы просили, ваш сайт не будет реагировать.
Адаптивная страница предназначена для адаптации к различным разрешениям (телефоны и планшеты).также может иметь разные разрешения) и делать это при наличии всех CSS по требованию без запроса их разрешения при изменении размера.

Вы можете уменьшить свой CSS для уменьшения трафика.

Однако, если вы настаиваете на JavaScript, вы можете сделать слушателя, чтобы выяснить, когда пользователь использует конкретный media, и добавить тег CSS в DOM. Этот ответ может быть полезным.