js設置網頁縮放,html網頁縮放比例設置

本文目錄一覽：

• 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。想要放大或者縮小到固定大小的話，直接傳遞數值即可的！

有任何疑問，歡迎追問……