Как создать медиа-запрос для таблицы стилей мобильного сайта?

Question

Ранее мне было сказано использовать что-то вроде:

<link rel="stylesheet" media="only screen and (max-width: 480px)" href="mobile.css">

Я хотел бы использовать отдельную таблицу стилей И HTML-документ для мобильных посетителей. Это нормально? У меня так много элементов, которые я хочу вырезать из мобильной версии, и мне показалось менее сложным просто создать сайт на сайте для мобильных устройств - это собственный HTML и CSS.

Как использовать мультимедийный запрос выше для конкретной таблицы стилей для мобильных устройств и для HTML? Какой код я бы использовал и куда бы я его поместил?

Answer 1

<link href="the/directory/containing/your/mobile.css type="text/css" media="handheld" rel="stylesheet" />

Следующая строка может быть:

<link href="the/directory/containing/your/desktop.css" type="text/css" media="screen" rel="stylesheet" />

Используйте этот метод и избегайте двух документов. Вместо этого вы стилизуете один документ в соответствии с устройством, используемым для просмотра этого документа.

Answer 2

Насколько мне известно, вы должны обнаружить серверную часть браузера и открыть другую страницу.

Пример псевдокода PHP

if(browser == mobile && !isset($_COOKIES["prefer_desktop_view"])) //Pseudo code you do the checking here
{
   $_COOKIES["is_mobile"] = true; //more pseudo code
   header("location: mobile.example.com") //redirect solution - if
}

Медиа-запросы специфичны для CSS. Нет способа сделать это на стороне клиента, и даже если бы он существовал, клиент все равно должен загрузить и проанализировать "настольный" HTML.