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

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

css mobile

如何允许用户从移动设备（CSS）切换回标准视图,css,mobile,Css,Mobile,可能重复：如果我将所有样式都放在一个样式表中，使用@media only screen and（max width:480px）、only screen and（max device width:480px）定义移动样式，是否有一种方法允许用户切换回标准视图，即使他们从移动设备查看站点我试着将我的移动风格放在一个单独的表格中，并使用一个styleswitcher脚本，但我无法实现。有没有一种方法可以用一个样式表来实现呢使用多个样式表的“变通方法”：您可以创建一个带有JavaScript

可能重复：

如果我将所有样式都放在一个样式表中，使用

@media only screen and（max width:480px）、only screen and（max device width:480px）

定义移动样式，是否有一种方法允许用户切换回标准视图，即使他们从移动设备查看站点

我试着将我的移动风格放在一个单独的表格中，并使用一个styleswitcher脚本，但我无法实现。有没有一种方法可以用一个样式表来实现呢

使用多个样式表的“变通方法”：

您可以创建一个带有JavaScript函数的按钮，该函数使用

因此，您可以在按钮上使用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">

剪下第一行和第二行，用media=“screen”简单加载“stylesDesktop.css”替换它们

我希望这有帮助

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