Я бы рекомендовал принять подход RESS. Это, по сути, комбинация адаптивного веб-дизайна с серверным компонентом. Общая логика заключается в следующем: запрашивающее устройство идентифицируется на сервере и основывается на некоторых условиях, в которых вы устанавливаете определенный набор ресурсов. Для программного обеспечения обнаружения сервера я рекомендую использовать решение от 51Degrees.
Итак, предположим, что на вашем сайте есть блок div, который вы хотите скрыть на всех мобильных устройствах. Сначала вам нужно загрузить детектор PHP с sourceforge. Ваша страница будет тогда иметь следующий код:
page.php
<?php
require_once 'path/to/core/51Degrees.php';
require_once 'path/to/core/51Degrees_usage.php';
//Where path/to/core is path to 'core' directory of detector
?>
<html>
<head>
<?php
$css_file = "desktop.css";
if ($_51d['IsMobile'] == TRUE)
{
$css_file = "mobile.css";
}
?>
<link rel="stylesheet" type="text/css" href="<?=$css_file; ?>">
</head>
<body>
<div class="desktop_only">
<p>Lorem......</p>
</div>
</body>
mobile.css
.desktop_only
{
display:none;
}
Теперь мобильные устройства не будут видеть, что DIV. Реальная польза от этого подхода заключается в способности поставлять другой набор ресурсов на основе типа устройства, и вам не нужно размещать десятки медиа-запросов для каждого возможного размера экрана. Возможно, вы захотите настроить мобильный дизайн своего веб-сайта, чтобы не тратить драгоценное пространство на экране смартфонов и планшетов или перепроектировать меню, чтобы избежать раскрывающихся разделов и т. Д.
Еще одна отличная вещь в этом подходе: если вам когда-либо понадобится провести дополнительные проверки (т.е.e: укажите другую тему для устройств Apple или проверьте, поддерживает ли устройство HTML-холст и т. д.), они будут легко интегрироваться в вашу текущую реализацию.
Надеюсь, это помогло.
Вы говорите, что ваш код запроса на медиа не скрывает элемент? – j08691
Правильно. Я должен закончить контент? – Martin