Window.innerWidth

只读的 Window 属性 innerWidth 返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在,则这个属性将包括它的宽度。

更确切地说,innerWidth 返回窗口的 layout viewport 的宽度。 窗口的内部高度——布局视口的高度——可以从 innerHeight 属性中获取到。

语法

let intViewportWidth = window.innerWidth;

一个整数型的值表示窗口的布局视口宽度是以像素为单位的。这个属性是只读的,并且没有默认值。

若要更改窗口的宽度,请使用 Window 的方法来调整窗口的大小,例如resizeBy() 或者 resizeTo()

使用说明

如果你需要获取除去滚动条和边框的窗口宽度,请使用根元素 <html>  的clientWidth 属性。

innerWidth 属性在任何表现类似于窗口的任何窗口或对象(例如框架或选项卡)上都是可用的。

示例

// 返回视口的宽度
var intFrameWidth = window.innerWidth;

// 返回一个框架集内的框架的视口宽度
var intFrameWidth = self.innerWidth;

// 返回最近的父级框架集的视口宽度
var intFramesetWidth = parent.innerWidth;

// 返回最外层框架集的视口宽度
var intOuterFramesetWidth = top.innerWidth;

规范

规范 状态 说明
CSS Object Model (CSSOM) View Module
window.innerWidth
Working Draft 初识定义

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
innerWidthChrome Full support 1Edge Full support 12Firefox Full support 1
Full support 1
No support 4 — 24
Notes
Notes This property was buggy and could give a wrong value before page load in certain circumstances, see bug 641188.
IE Full support 9Opera Full support 9Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4
Full support 4
No support 4 — 24
Notes
Notes This property was buggy and could give a wrong value before page load in certain circumstances, see bug 641188.
Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

参考