【问题标题】:Switching back and forth between mobile and standard views with css / php styleswitcher使用 css / php styleswitcher 在移动视图和标准视图之间来回切换
【发布时间】: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" />

但这也不起作用。

任何人都可以在我的设置方式中发现我的错误,和/或推荐一种更好的方法来允许用户在标准视图和移动视图之间切换(没有创建一个完全独立的移动网站并使用重定向,我是希望避免)?

【问题讨论】:

    标签: php css mobile


    【解决方案1】:

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

    【讨论】:

      猜你喜欢
      • 2011-04-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-11-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-04-01
      相关资源
      最近更新 更多