瀏覽器視窗大小和頁面可視區大小(一)

2021-09-30 16:48:41 字數 1653 閱讀 4379

innerwidth      

innerheight

outerwidth

outerheight

document.doucument.element.clientwidth

/ clientheight

document.body.clientwidth

/clientheight

經測試demo試驗發現,在chrome中,innnerwihth和outerwidth返回相同的值,為視口寬度;高度innnerheight為視口高度,outerheight為視窗高度;(但是在js高階程式設計書中寫道,在chrome瀏覽器中,outerwidth/height和innerwidth/height返回的值都相同,都是視口的寬高。有點糾結...)

在ie,firefox,safari,opera和chrome中,這兩個屬性儲存了頁面視口的資訊,在ie6中,這兩個屬性只有在標準模式下生效。(總結最後介紹了什麼標準模式,什麼是複雜模式)

如果是混雜模式,ie6

就要通過這兩個屬性得到視口的寬高;

在ie9+、safari和firefox中,outerwidth/height返回瀏覽器本身的視窗寬高尺寸。

對於chrome,無論是標準模式還是混雜模式,隨便使用哪個都可以取得視口(viewport)寬高;

在opera中,innerwidth和innerheight表示該容器中頁面檢視區域大小(減去邊框寬度);

在opera中,這兩個屬性的值表示頁面檢視容器的大小;這裡所謂的「頁面檢視容器」指的是opera中單個標籤頁對應的瀏覽器視窗。

備註:頁面的高度由內到外細分,如下圖所示。

備註:使用相容性**測試發現,獲取視口大小的值,和在各個瀏覽下使用innerwidth和innerheight獲得的值大小相等;(可能不需要相容了?各個瀏覽器都想chrome一樣可以直接用innerwidth了?)

測試demo如下:

什麼是標準模式?什麼是複雜模式?

混雜模式和標準模式都是一種文件模式,文件模式都在html檔案頭部宣告;

混雜模式會讓ie瀏覽器的行為(包含非標準特性)與ie5相同;

標準模式則是讓ie瀏覽器更接近標準行為;

另外還有準標準模式和超級標準模式,

超級標準模式會讓瀏覽器的以其所有版本瀏覽器中最標準的行為去解釋文件內容,而準標準模式下的瀏覽器大部分行為都是符合標準的,不符合標準的地方主要體現在處理間隙的時候。在**中使用尤其明顯;

如果在文件頭部沒有類似的文件型別宣告,就會觸發混雜模式;

關閉超級標準模式,指定瀏覽器版本使用下面的**:

「如果xhtml文件包含形式完整的doctype,那麼它一般以標準模式呈現。對於html 4.01文件,包含嚴格dtd的doctype常常導致頁面以標準模式呈現。包含過渡dtd和uri的doctype也導致頁面以標準模式呈現,但是有過渡dtd而沒有uri會導致頁面以混雜模式呈現。doctype不存在或形式不正確會導致html和xhtml文件以混雜模式呈現。」
「在標準模式中,瀏覽器根據規範呈現頁面;在混雜模式中,頁面以一種比較寬鬆的向後相容的方式顯示。」

瀏覽器視窗可視區域大小相關方法

一 對於ie9 chrome firefox opera 以及 safari window.innerheight 瀏覽器視窗的內部高度 window.innerwidth 瀏覽器視窗的內部寬度 二 對於 internet explorer 8 7 6 5 document.documentelem...

瀏覽器時下視窗可視區域寬度 瀏覽器和頁面的幾個概念

window.outerheight 瀏覽器的高度 window.outerwidth 瀏覽器寬度 window.innerheight 瀏覽器內頁面的可用高度,此高度包含了水平滾動條的高度。可表示為瀏覽器當前高度去除瀏覽器邊框工具條後的高度 window.innerwidth瀏覽器內頁面的可用高度...

瀏覽器視窗的大小

var w window.innerwidth document.documentelement.clientwidth document.body.clientwidth var h window.innerheight document.documentelement.clientheight ...