js设置网页缩放,html网页缩放比例设置

小蓝 • 2024-12-12 12:49 • 编程

本文目录一览：

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。想要放大或者缩小到固定大小的话，直接传递数值即可的！

有任何疑问，欢迎追问……

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/242517.html