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


Switching back and forth between mobile and standard views with css / php styleswitcher

有问题的网站在这里:

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" />

。移动样式不再以某种方式在级联中排在最后。正在加载移动.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插件:https://github.com/jamesmehorter/device-theme-switcher/。该插件允许您为手持设备和平板电脑定义单独的主题,并使用用户代理检测将访问者发送到适当的主题,但也允许您在移动布局中包含"查看完整站点"链接,以便用户可以根据需要返回标准视图。