如何用javascript设置页面的宽度自适应

JavaScript0105

如何用javascript设置页面的宽度自适应,第1张

使用javascript设置页面的宽度自适应的方法如下：

首先新建一个test.aspx空白页面，如图所示：

将一个div拖动到新建的test.aspx空白页面中，其中div的源码为<div id="Div1" runat="server"></div>。如图所示：

将JavaScript函数进行定义，其中源码为<script type="text/javascript"></script>。函数名可以自定义为function resizeDiv(minusWidth, minusHeight) {}。在自定义的函数中包含了高度和宽度，如图所示：

其中函数的详细内容为，如图所示：

函数调用完成之后，开始调用函数，页面默认剩余的宽度是20px和40px。如图：

函数调用完成之后，利用JavaScript设置页面的宽度自适应即可成功。

你可以让顶部导航栏和其他部分分处不同的层，然后你只需要对其他部分所处的层进行缩放处理，导航栏不动，这样就实现你的目的了。比如：

<div class=head>这是顶部导航栏</div>

<div class=body>这是其他主体部分</div>

然后js代码就可以这样：

$("div.body").css({"transform":"scale(0.8)","transform-origin":"50% 0"})

function getInfo()

{

var s = ""

s += " 网页可见区域宽："+ document.body.clientWidth+" "

s += " 网页可见区域高："+ document.body.clientHeight+" "

s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+" "

s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"+" "

s += " 网页正文全文宽："+ document.body.scrollWidth+" "

s += " 网页正文全文高："+ document.body.scrollHeight+" "

s += " 网页被卷去的高(ff)："+ document.body.scrollTop+" "

s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop+" "

s += " 网页被卷去的左："+ document.body.scrollLeft+" "

s += " 网页正文部分上："+ window.screenTop+" "

s += " 网页正文部分左："+ window.screenLeft+" "

s += " 屏幕分辨率的高："+ window.screen.height+" "

s += " 屏幕分辨率的宽："+ window.screen.width+" "

s += " 屏幕可用工作区高度："+ window.screen.availHeight+" "

s += " 屏幕可用工作区宽度："+ window.screen.availWidth+" "

s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+" "

s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+" "

s += " window的页面可视部分实际高度(ff) "+window.innerHeight+" "

alert (s)

}

看看能帮到你吗？按照上面是可以实现的。