21

我通过@media 查询对我的网站进行了重大修改，以在手机上显示非常精简。但是，我的用户要求提供该站点的桌面版本（可通过链接获得）。

更进一步，桌面站点本身也会根据分辨率被@media 查询修改。我正在考虑选择一种“桌面”分辨率，比如 1440x900 并强制手机以该分辨率显示？

这可能吗，也许是通过JavaScript？或者，可以完全禁用这些@media 查询吗？

谢谢！

4

4 回答 4

33

我和客户有同样的问题。但问题是有 120 多个 CSS 文件包含媒体查询。所以我所做的是，设置视口宽度。我在那个网站上使用了这个片段并且工作正常。使用它，您甚至可以为用户提供在响应式设计和非响应式设计之间切换的选项。

$(document).ready(function(){
   $('meta[name="viewport"]').prop('content', 'width=1440');
});

注意：1440 是您首选的屏幕宽度。

希望这可以帮助 ：）

于 2013-11-22T05:21:54.997 回答
10

我会向您的<html>或<body>诸如此类的类添加一个类class="force-desktop"，然后在您的媒体选择器上添加

@media () {
    body:not(.force-desktop) {
        //styles
    }
}

或类似的东西

于 2013-03-13T17:43:23.727 回答
3

没有 JQuery 的 IJas 的解决方案如下所示：

var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', width=1440);
于 2016-07-07T14:49:14.617 回答
0

将可能需要禁用的任何样式放在自己的样式表中是最容易的，并带有标题属性，以便更容易找到它们。它们可以是内联样式或链接到 .css 文件的元素。

function toggleSheet(title){
  var S=document.styleSheets, L=S.length, temp;
  while(L){
    temp=S[--L];
    if(temp.title===title){
    temp.disabled=!temp.disabled;
    return temp;
  }  
}
于 2013-03-13T17:03:06.970 回答