国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript獲取瀏覽器、元素、屏幕的寬高尺寸

Amio / 2605人閱讀

摘要：一瀏覽器視口的寬高瀏覽器視口寬度單位像素，如果存在滾動條則包括它。二瀏覽器的寬高整個瀏覽器窗口的高度單位像素，包括側邊欄如果存在窗口鑲邊和窗口調正邊框。語法示例六屏幕的寬高屏幕分辨率寬高。

版權聲明 
轉載請告知并注明來源作者  
作者：唐金健  
網絡昵稱：御焱  
掘金知乎思否專欄：優雅的前端
前言 
有時候在獲取瀏覽器、元素、屏幕的尺寸，傻傻分不清。為了讓自己清晰認識，能夠快速確定自己需要哪個屬性，現在把這些尺寸屬性整理了一下。
一、瀏覽器視口的寬高 Window.innerWidth、Window.innerHeight 
瀏覽器視口（viewport）寬度（單位：像素），如果存在滾動條則包括它。
語法 
let viewportWidth = window.innerWidth;
let viewportHeight = window.innerHeight;
備注

window.innerWidth和window.innerHeight是只讀屬性，無默認值。

如果HTML中添加了以下內容，則頁面在移動端訪問的時候，視口寬高始終與邏輯分辨率一致。
否則，移動端瀏覽器會在一個通常比屏幕更寬的虛擬”窗口“（視口）中渲染頁面。

二、瀏覽器的寬高 Window.outerWidth、Window.outerHeight 
整個瀏覽器窗口的高度（單位：像素），包括側邊欄（如果存在）、窗口鑲邊（window chrome）和窗口調正邊框（window resizing borders/handles）。
語法 
let outerWidth = window.outerWidth;
let outerHeight = window.outerHeight;
備注

window.outerWidth和window.outerHeight是只讀屬性，無默認值。
在使用桌面端瀏覽器的模擬移動設備查看網頁時，這兩個屬性，依然指的是桌面端瀏覽器窗口的寬高。

三、元素內部的寬高 Element.clientWidth、Element.clientHeight 
元素內部寬 = width + padding-left + padding-right - 豎直滾動條寬度  
元素內部高 = height + padding-top + padding-bottom - 橫向滾動條高度
語法 
let clientWidth = element.clientWidth;
let clientHeight = element.clientHight;
示例

四、元素的布局寬高 Element.offsetWidth、Element.offsetHight 
元素布局寬 = width + padding-left + padding-right + 豎直滾動條寬度 + border-left + border-right  
元素布局高 = height + padding-top + padding-bottom + 橫向滾動條高度 + border-top + border-bottom
語法 
let offsetWidth = element.offsetWidth;
let offsetHight = element.offsetHight;
示例

五、元素的內容寬高 Element.scrollWidth、Element.scrollHeight 
元素的內容寬高，包括由于溢出導致內容在屏幕上下不可見的內容。
語法 
let scrollWidth = element.scrollWidth;
let scrollHeight = element.scrollHeight;
示例

六、屏幕的寬高 Screen.width、Screen.height 
屏幕分辨率寬高。如果是移動設備，則返回邏輯分辨率寬高。
語法 
let screenWidth = window.screen.width;
let screenHeight = window.screen.height;
七、屏幕的可用寬高 Screen.availWidth、Screen.availHeight 
減去比如Windows的任務欄等界面特性的屏幕的可用寬高。如果是移動設備，則返回邏輯分辨率寬高。
語法 
let availWidth = window.screen.availWidth;
let availHeight = window.screen.availHeight;

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95108.html

相關文章

  • 瀏覽器元素尺寸與位置查詢指南

    摘要：前言這篇文章主要介紹了有關瀏覽器中獲取坐標以及尺寸的幾種途徑算是比較全的一篇文章了在瀏覽器中獲取元素的坐標以及尺寸是非常容易的有非常多種方式來完成這些需求但是雜亂的和很多兼容處理導致了瀏覽器中沒有直接的方式來獲取我們想要的結果仔細想想這個問 前言 這篇文章主要介紹了有關瀏覽器中獲取坐標以及尺寸的幾種途徑,算是比較全的一篇文章了. 在瀏覽器中獲取元素的坐標以及尺寸是非常容易的,有非常多種...

    lei___ 評論0 收藏0

  • 獲取屏幕寬高width(),outerWidth,innerWidth,clientWidth的區別

    摘要：基本介紹與與獲得的是屏幕可視區域的寬高，不包括滾動條與工具條。縱向滾動條寬度橫向滾動條高度與與獲得的是加上工具條與滾動條窗口的寬度與高度。兼容性和屬性與和屬性以及以下不支持。 基本介紹 $(window).width()與$(window).height() $(window).width()與$(window).height()：獲得的是屏幕可視區域的寬高，不包括滾動條與工具條。 $...

    woshicixide 評論0 收藏0

  • 移動端開發系列——像素與viewport

    摘要：目錄移動端開發的基本觀點像素基礎知識原理解析彈性布局響應式設計的運用移動端的事件庫的使用移動端開發的基本觀點移動端開發的意義移動端用戶使用量市場需求市場供給公司需要移動端開發人才工資高，就業易涌現大波程序猿到了猴年馬月，工資才會 目錄 移動端開發的基本觀點 像素基礎知識 viewport原理解析 彈性布局 響應式設計 1rem的運用 移動端的事件 zepto庫的使用 移動端開發的...

    JayChen 評論0 收藏0

  • 移動端開發系列——像素與viewport

    摘要：目錄移動端開發的基本觀點像素基礎知識原理解析彈性布局響應式設計的運用移動端的事件庫的使用移動端開發的基本觀點移動端開發的意義移動端用戶使用量市場需求市場供給公司需要移動端開發人才工資高，就業易涌現大波程序猿到了猴年馬月，工資才會 目錄 移動端開發的基本觀點 像素基礎知識 viewport原理解析 彈性布局 響應式設計 1rem的運用 移動端的事件 zepto庫的使用 移動端開發的...

    lingdududu 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<