使用css / php styleswitcher在移动和标准视图之间来回切换 [英] 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）

I originally designed this using one css file for default, print, and mobile styles, using @media print and @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) to separate those styles.

我还有一些单独的样式表用于一些辅助功能相关的修改（类型大小增加，对比度变化）。我使用PHP styleswitcher脚本允许用户手动切换这些样式。我以如下方式链接到标题中的styleswitcher：

I also have separate stylesheets for a couple of accessibility-related modifications (type size increases, contrast changes). I'm using a PHP styleswitcher script to allow the user to switch these styles manually. I link to the styleswitcher in the header like this:

<link rel="stylesheet" href="/wp-content/themes/asan/css/switcher.php?default=style.css" type="text/css" />

并将默认样式定义为 style.css 。

这一切都正常工作，直到客户表示他们想为用户提供一种从移动设备切换回默认布局的方法。我想我会把所有的移动样式都放到一个单独的样式表中，在头文件中添加一个额外的链接，使用与以前相同的媒体查询加载样式表，然后在页脚中添加一个样式切换链接，允许用户如果喜欢，切换回主样式表。

This was all working fine until the client said they wanted to provide a way for users to switch back to the default layout from a mobile device. I figured I'd pull out all my mobile styles into a separate stylesheet, add an extra link in the header file to load that stylesheet using the same media query as before, and then add a style-switching link in the footer to allow users to switch back to the main stylesheet if the prefer.

但是当我从主样式表中删除我的移动样式，并在加载主样式表后在标题中添加这一行：

But when I removed my mobile styles from the main stylesheet and added this line in the header after loading the main stylesheet:

<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的样式;

…the mobile styles are no longer coming last in the cascade somehow. The mobile.css file is loading, but only styles marked !important are being displayed; everything else is defaulting to the main stylesheet.

我想也许这是因为移动样式表是在styleswitcher脚本之外加载的，所以我尝试了

I thought maybe this was because the mobile stylesheet was being loaded outside of the styleswitcher script, so I tried

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

但不起作用。

任何人都可以在我的设置中找到我的错误，和/或推荐一个更好的方式，允许用户在标准和移动视图之间切换（没有创建一个完全独立的移动网站和使用重定向，我希望避免）？

Can anybody find my error in how I set this up, and/or recommend a better way to allow users to switch between standard and mobile views (short of creating a completely separate mobile site and using a redirect, which I'm hoping to avoid)?

推荐答案

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

For anybody else dealing with this problem -- I used the Device Theme Switcher WP plugin: https://github.com/jamesmehorter/device-theme-switcher/. The plugin allows you to define separate themes for handhelds and tablets and uses User Agent detection to send visitors to the appropriate theme, but also lets you include a "View Full Site" link in your mobile layouts so users can return to the standard view if they want.

这篇关于使用css / php styleswitcher在移动和标准视图之间来回切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！