Участок, о котором идет речь, находится здесь:
http://autisticadovcacy.uniongraphics.org
Я изначально разработал это, используя один файл css для стилей по умолчанию, печати и мобильных устройств, используя @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) @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 загружается, но отображаются только стили, отмеченные! Important; все остальное не соответствует основной таблице стилей.
Я подумал, может быть, это потому, что мобильная таблица стилей загружалась за пределы скрипта стилей, поэтому я попробовал
<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" />
но это тоже не работает.
Может ли кто-нибудь найти мою ошибку в том, как я это установил, и / или рекомендовать лучший способ разрешить пользователям переключаться между стандартным и мобильным представлениями (не создавая полностью отдельный мобильный сайт и используя перенаправление, которое я надеюсь избежать )?
Для кого-либо другого, занимающегося этой проблемой, я использовал плагин WP Theme для коммутатора устройств: https://github.com/jamesmehorter/device-theme-switcher/ . Плагин позволяет вам определять отдельные темы для карманных компьютеров и планшетов и использовать обнаружение User Agent для отправки посетителей в соответствующую тему, но также позволяет включать ссылку «Просмотреть полный сайт» в ваших макетах для мобильных устройств, чтобы пользователи могли вернуться к стандартным представлениям, если они хотят.