Сайт, о котором идет речь, находится здесь:
http://autisticadovcacy.uniongraphics.org
Первоначально я разработал это, используя один CSS-файл для стилей по умолчанию, для печати и для мобильных устройств, используя @media print и @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) дляразделите эти стили.
У меня также есть отдельные таблицы стилей для пары модификаций, связанных с доступностью (увеличение размера шрифта, изменение контраста).Я использую сценарий переключателя стилей PHP, чтобы пользователь мог переключать эти стили вручную.Я ссылаюсь на переключатель стилей в заголовке следующим образом:
<link rel="stylesheet" href="/wp-content/themes/asan/css/switcher.php?default=style.css" type="text/css" />
и определяю стиль по умолчанию как style.css.
Это все работало нормально, пока клиент не сказал, что хочет предоставитьспособ для пользователей вернуться к макету по умолчанию с мобильного устройства.Я решил, что вытащу все свои мобильные стили в отдельную таблицу стилей, добавлю дополнительную ссылку в заголовочный файл, чтобы загрузить эту таблицу стилей, используя тот же медиа-запрос, что и раньше, а затем добавлю ссылку переключения стиля в нижний колонтитул, чтобы позволить пользователямчтобы вернуться к основной таблице стилей, если предпочитаете.
Но когда я удалил свои мобильные стили из основной таблицы стилей и добавил эту строку в заголовок после загрузки основной таблицы стилей:
<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="/wp-content/themes/asan/css/mobile.css" />
… Мобильные стили больше не стоят последними в каскаде.Файл mobile.css загружается, но отображаются только отмеченные стили!все остальное по умолчанию относится к основной таблице стилей.
Я подумал, может быть, это из-за того, что мобильная таблица стилей загружалась вне скрипта styleswitcher, поэтому я попытался
<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="/wp-content/themes/asan/css/switcher.php?default=mobile.css" />
, но это неработать либо.
Может кто-нибудь найти мою ошибку в том, как я настроил это, и / или порекомендовать лучший способ позволить пользователям переключаться между стандартным и мобильным представлениями (кроме создания совершенно отдельного мобильного сайта и использованияредирект, которого я надеюсь избежать)?