javascript - 有一个通过媒体查询查看 'non-mobile layout' 的按钮吗?

标签 javascript html css media-queries mobile-website

<分区>


要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用,以及预期结果。另请参阅:Stack Overflow question checklist

关闭 9 年前

当使用媒体查询创建一个“响应式” 网站时,我如何才能有一个按钮来查看布局的“完整”/桌面版本?例如:

mobile wikipedia desktop wikipedia

我可以看到他们显然在使用 M 子域,这不是我想要的。我只是希望能够单击一个链接并让网站认为浏览器不适合移动宽度,直到 cookie 过期或其他什么。

我想过有没有可能用js去掉css文件,再加载一个?

你是怎么解决的

最佳答案

Javascript 可能是这里的一个选项 - 使用类似的东西:

function getURLParameter(name){
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
};
var version=getURLParameter('version');


var headHTML = document.getElementsByTagName('head')[0].innerHTML;

switch(version){
    case 'mobile':
        headHTML    += '<link type="text/css" rel="stylesheet" href="style.css" media="only screen and (max-device-width: 480px)">';
    break;
    case 'desktop':
        headHTML    += '<link type="text/css" rel="stylesheet" href="style.css" media="only screen and (max-device-width: 1040px)">';
    break;
    default:
        headHTML    += '<link type="text/css" rel="stylesheet" href="style.css" >';
    break;
}

version && document.getElementsByTagName('head')[0].innerHTML = headHTML;

然后,各种版本的链接将附加 GET 变量 version=desktop 等,并且只会加载相关的 CSS。

清楚地-适本地更改样式表包含中的媒体属性。

关于javascript - 有一个通过媒体查询查看 'non-mobile layout' 的按钮吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19980902/

上一篇:javascript - 按日期每天更改特定链接

下一篇:html - 为什么我的 <td> 内容导致其他 <td> 增长?

相关文章:

javascript - 如何在绘图中使颜色条的刻度值不均匀

javascript - Google Docs 像素到英寸

javascript - Angular 4-如何使用 ngClass 添加和删除多个类?

html - 使表格大小与 div 相同

jquery - 如何修复 IE7 中的 HTML z-index 层排序?

css - 使用 rails 使类(class)类型的值具有独特的颜色

javascript - Polymer fire() 是否在全局范围内发布事件?

javascript - y 的值是如何分配的

html - 使用 CSS 屏蔽图像

javascript - 使用 css 删除 IE 9 中输入按钮的黑色轮廓