使用 css / php styleswitcher 在移动视图和标准视图之间来回切换

有问题的网站在这里：

http://autisticadovcacy.uniongraphics.org http://autisticadovcacy.uniongraphics.org

我最初设计这个时使用一个 css 文件作为默认、打印和移动样式，使用@media print and @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" />

但这也行不通。

任何人都可以发现我的设置错误，和/或推荐一种更好的方法来允许用户在标准视图和移动视图之间切换（缺少创建一个完全独立的移动网站并使用重定向，我希望避免这种情况） ）？

对于处理此问题的其他人 - 我使用了 Device Theme Switcher WP 插件：https://github.com/jamesmehorter/device-theme-switcher/ https://github.com/jamesmehorter/device-theme-switcher/。该插件允许您为手持设备和平板电脑定义单独的主题，并使用用户代理检测将访问者发送到适当的主题，而且还允许您在移动布局中包含“查看完整站点”链接，以便用户可以返回到标准视图他们要。