使用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)
}
看看能帮到你吗？按照上面是可以实现的。
