【发布时间】: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