jquery - 如何防止网站响应

Question

我的基于 GreaseMonkey 的脚本还有一个问题。

我想做的是防止网站表现得响应式。我的意思是我希望任何网站在放大时保持其默认外观，我只希望滚动条(两者)看起来像在旧网站上一样。

我尝试将所有网站放在一个 div 中并设置其宽度，但它不起作用。

这是我的代码:

    var OA_disableResponsive = function(){
      $("body").append('<div id="OA_Container"></div>');
      var winWidth = $(window).width();
      $("#OA_Container").css("position", "absolute").css("width",winWidth);
      var el = $("body").children().not("#OA_Container");
      $("#OA_Container").append(el);
    }

它将我的容器 div 放置在我希望它正确放置的位置，但它仍然不能阻止网站在放大时更改其外观。

---[编辑]---

我决定尝试其他方法，看起来它会在几乎没有帮助的情况下起作用。

    var OA_disableResponsive = function(){
      var winWidth = $(window).width();
      var winHeight = $(window).height();
      var docWidth = $(document).width();
      var docHeight = $(document).height();
      var url = $(location).attr("href");

      $("body").append('<div id="OA_Container"><iframe src="'+url+'" id="OA_Iframe"></iframe></div>');
      $("#OA_Container").css("cssText", "  \
        display: block; \
        position: fixed; \
        overflow: scroll; \
        top: 0px; \
        width: "+winWidth+"px; \
        height: "+winHeight+"px; \
        left: 0px; \
        bottom: 0px: \
        right: 0px; \
        z-index: 9999; \
        margin: 0 auto; \
      ");
      $("#OA_Iframe").css("cssText", " \
        position: absolute; \
        width: "+docWidth+"px; \
        height: "+docHeight+"px; \
        top: 0px; \
        left: 0px; \
        bottom: 0px: \
        right: 0px; \
        margin: auto; \
      ");
    }

使用这种方法时我遇到了一个问题 - 我无法水平滚动。我的 CSS 很弱，我不知道如何让这个容器 div 始终匹配窗口大小(这不只是响应式吗？)并且在其中包含整个页面的 iframe。还有哪一个应该是可滚动的？我应该使用属于 div 的大型 iframe 和滚动条，还是使用自己的滚动条匹配 div 大小的 iframe？

Answer 1

从网站中删除响应的最简单方法是修改视口(viewport)以保持一定的宽度。

你可以尝试这样的事情:

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

Via- Possible to disable @media queries or force a resolution? Reason: Allow an iphone to see the desktop site?