【问题标题】:How to prevent site from being responsive如何防止网站响应
【发布时间】:2015-06-18 04:33:49
【问题描述】:

我的基于 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 和滚动条,还是使用 iframe 匹配 div 大小和它自己的滚动条?

【问题讨论】:

  • 请在此处发布您的 html 和 css。
  • 使用特定像素而不是 % 作为所有页面元素的边距、内边距、宽度和高度,以避免响应式布局顺便说一句
  • 如果我在自己的网站上做,我什至不会问,有教程。我在我访问的每个站点上都有脚本,我希望在其中包含该选项。
  • btw "css("position", "absolute").css("width",winWidth);"可能是一个对象 ".css({"width":winWidth, "position":"absolute"})" ...我们到底如何知道网站“外观”正在发生变化以及如何防止这种情况发生发布您页面的完整代码和样式..
  • 我只想将整个网站放入一个大 div 中,该 div 应该覆盖所有窗口并且没有响应,因此整个网站不会响应。它必须适用于任何网站,无论网站的外观如何。

标签: jquery html css responsive-design


【解决方案1】:

消除网站响应的最简单方法是修改视口以保持一定的宽度。

你可以试试这样的:

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

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

【讨论】:

  • 祝福你的灵魂。你是救生员。这 3 行代码解决方案帮助减少了许多人的工作时间,从长远来看,这些时间很容易变成几天。为这个优雅的答案 +1。
【解决方案2】:

JSFiddle

您可能错过了display:block

很难说,因为您只提供了Javascript,同时还说 JS 是您程序中唯一有效的部分。

请注意,您的实现不会禁用 media 查询,因此您并没有完全禁用响应。

【讨论】:

  • 试过了,不行。而且我不能提供任何 html/css,因为它应该可以在任何网站上工作,这是棘手的部分。我也不知道如何消除所有媒体查询,这可以工作。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-09-19
  • 2014-10-03
  • 1970-01-01
相关资源
最近更新 更多