Мобильный и Основной CSS Mix-up

Question

У меня есть два листа CSS для моего сайта, один основной CSS и один мобильный CSS. Проблема в том, что при просмотре на мобильном устройстве (iPhone, Android) две таблицы стилей перепутаны. Например, при просмотре веб-сайта на iPhone применяются некоторые стили из основной таблицы стилей.

Что может быть причиной этого? Ниже приведены мои объявления CSS:

<link href="css/main.css" rel="stylesheet" type="text/css" />

<link media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
<meta name = "viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Answer 1

Файл main.css будет включен на любое устройство, на котором вы просматриваете страницу, часть медиазапроса для mobile.css будет вызываться для заданных вами параметров вместе с другой таблицей стилей.

Если у вас возникли проблемы с включением стилей, либо исключите main.css с помощью медиазапроса, либо повторно объявите эти стили в файле mobile.css.