【发布时间】:2012-02-26 23:44:59
【问题描述】:
有问题的网站在这里:
http://autisticadovcacy.uniongraphics.org
我最初使用一个 css 文件来设计这个,用于默认、打印和移动样式,使用
@media print 和 @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) 将这些样式分开。
我还为一些与可访问性相关的修改(字体大小增加、对比度变化)提供了单独的样式表。我正在使用 PHP 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 文件正在加载,但仅显示标记为 !important 的样式;其他所有内容都默认为主样式表。
我想这可能是因为移动样式表是在 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" />
但这也不起作用。
任何人都可以在我的设置方式中发现我的错误,和/或推荐一种更好的方法来允许用户在标准视图和移动视图之间切换(没有创建一个完全独立的移动网站并使用重定向,我是希望避免)?
【问题讨论】: