1

使用媒体查询创建'responsive'网站时，如何使用按钮查看布局的“完整”/桌面版本？例如：

移动维基百科 桌面维基百科

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

我想过可能用js删除css文件，然后加载另一个？

你如何解决这个问题

4

3 回答 3

0

您使用哪种服务器端语言？

对于 python 和 django，我们使用https://pypi.python.org/pypi/django-mobile。

我们在视图代码中询问风味并发送不同的模板。

于 2013-11-14T15:07:55.373 回答
0

最常见的解决方案是在 2 个子域上提供站点。一种具有移动或响应式布局，另一种使用非响应式完整桌面布局。

于 2013-11-14T14:59:25.660 回答
0

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。

清楚地 - 根据需要更改样式表包含中的媒体属性。

于 2013-11-14T14:59:30.027 回答