2012-02-26 58 views
0

网站有关移动和标准视图之间是在这里:来回切换的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 styleswitcher脚本来允许用户手动切换这些样式。我链接到styleswitcher在标题是这样的:

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

但这并不工作。

任何人都可以找到我的错误,我/ /或建议一个更好的方式来允许用户在标准和移动视图之间切换(短的创建一个完全独立的移动网站和使用重定向, m希望避免)?

回答

0

对于任何其他人处理这个问题 - 我使用的设备主题切换WP插件:https://github.com/jamesmehorter/device-theme-switcher/。该插件允许您为掌上电脑和平板电脑定义单独的主题,并使用用户代理检测功能将访问者发送到适当的主题,但也可以让您在移动版面中添加“查看完整网站”链接,以便用户可以返回到标准视图他们要。