Question

可能重复：
Switching back and forth between mobile and standard views with css / php styleswitcher

如果我将所有样式放在一个样式表中，使用@media only screen and (max-width: 480px), only screen and (max-device-width: 480px)定义移动样式，是否有办法允许用户切换回标准视图，即使他们从移动设备查看该网站？ / p>

我尝试将我的移动样式放在单独的工作表中并使用styleswitcher脚本，但我无法使用它。有没有办法用一个样式表来做到这一点？

Answer 1

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

Answer 2

使用多个样式表的“解决方法”：

您可以使用JavaScript函数创建一个按钮，使用innerHTML编辑标题。

因此，您可以使用onclick按钮来执行包含innerHTML的JavaScript函数，以删除样式表的设备特定加载，并将其替换为仅用于计算机的样式表。

这意味着您需要再次使用三个样式表。仅限一种移动样式，一种仅用于桌面样式，另一种用于常见样式。

<link href="stylesMobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 480px)">
<link href="stylesDesktop.css" rel="stylesheet" type="text/css" media="screen and (min-width: 480px)">
<link href="stylesCommon.css" rel="stylesheet" type="text/css" media="screen">

剪下第1行和第2行，并使用media =“screen”简单加载“stylesDesktop.css”替换它们

我希望这会有所帮助。

PS：我想不出用户友好的方式来“覆盖”@media属性。出于测试目的，我假设伪造用户代理应该工作。

如何允许用户从移动设备切换回标准视图（CSS）

2 个答案: