目前，電腦顯示器主要為液晶顯示器，它們的屏幕大小參差不齊，分辨率自然也大小不一，從面導致同一大小的網頁在不同分辨率的電腦顯示千差萬別，可能有的顯示正常，有的顯示亂。這就要求在設計網頁時處理好這個問題，使網頁在每種電腦屏幕的分辨率都能正常顯示。要達到這個要求，就需要根據電腦屏幕大小自動調整網頁的寬度。

自動調整網頁寬度一般來說用 javascript 來實現，但 CSS3 問世之后，也能用 CSS 實現，由于在前面的文章中已經介紹過用 CSS3 中的媒體查詢(media)自動調整網頁寬度，因此本篇主要介紹用 javascript，方法特別很簡單，一兩句代碼就能實現，不像媒體查詢每種分辯率的電腦屏幕都要定義一次。

根據電腦屏幕分辯率大小自動調整網頁寬度實例

一般來說，根據電腦屏幕分辯率自動調整網頁寬度用于寬度不限制或用百分比的情況，限制寬度的情況沒必要再自動調整，所以主要用于網站后臺或前臺用百分比的情況。以下是網站后臺用 iframe 框架自動調整網頁寬度的具體代碼：

html代碼：

javascript代碼：

window.onload = function () {

var rid = document.getElementById("rightId");

if (rid.Document) {

rid.style.width = document.body.scrollWidth - 200;

}

else {

rid.style.width = document.body.scrollWidth - 200 + 'px';

}

}

以上代碼雖然是用于網站后臺的，但前臺用百分比的情況跟它也差不多，只需稍微改一改代碼就能實現。

總結

以上是生活随笔為你收集整理的html网页大小自动调整大小,根据电脑屏幕分辩率大小自动调整网页宽度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。