本文目录一览：
- 1、javascript能不能实现整个网页根据浏览器高度宽度自动缩放?
- 2、判断显示器分辨率，并实现网页缩放，类似于浏览器缩小比例的js代码
- 3、JS控制浏览器网页内容的百分比缩放
- 4、js获取分辨率和缩放页面的方法
- 5、js网页缩放重置
javascript能不能实现整个网页根据浏览器高度宽度自动缩放?
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);
}
看看能帮到你吗？按照上面是可以实现的。
判断显示器分辨率，并实现网页缩放，类似于浏览器缩小比例的js代码
我有个方法，js我就不写了，说下思路
zoom 来设置页面的缩放，比如 body{zoom:0.8;} 就是以0.8的比例缩小页面，
var h = document.body.clientWidth; //获得屏幕宽度
document.getElementsByTagName('body').style.zoom=1920/h;
我没有试过，你自己试试看
JS控制浏览器网页内容的百分比缩放
你可以让顶部导航栏和其他部分分处不同的层，然后你只需要对其他部分所处的层进行缩放处理，导航栏不动，这样就实现你的目的了。比如：
div class=head这是顶部导航栏/div
div class=body这是其他主体部分/div
然后js代码就可以这样：
$("div.body").css({"transform":"scale(0.8)","transform-origin":"50% 0"})
js获取分辨率和缩放页面的方法
var screen = window.screen;//获取分辨率
screen.width；//获取分辨率的宽度
screen.height；//获取分辨率的高度
//页面缩放比例设置方法
document.getElementsByTagName('body')[0].style.zoom=0.67 //该方法将页面设置比例调整为67%
js网页缩放重置
看看如下示例是否符合你的需求：
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
/head
style type="text/css"
div{width: 30px;height: 100px;border: 1px solid #ccc;background: #999;}
/style
body
div onmousewheel="bsadapt(this)"/div
/body
script type="text/javascript"
function bsadapt(o){
var zoom = parseInt(o.style.zoom, 10)||100;
zoom += event.wheelDelta/12;
if(zoom 0){
o.style.zoom = zoom+'%';
}
return false;
}
/script
/html
鼠标移动到区域，然后滚动滚动，可以放大、缩小div。想要放大或者缩小到固定大小的话，直接传递数值即可的！
有任何疑问，欢迎追问......
