innerWidth | outerWidth | |
Chrome | 1920 | 1920 |
opera | 1920 | 1920 |
IE8 | 不支持 | 不支持 |
IE9+ | 1920 | 1936 |
Firfox | 1920 | 1936 |
safari | 1920 | 1936 |
通过document.compatMode这个属性来检测,当前页面处于何种模式:
CSS1Compat:标准模式
BackCompat:混杂模式
什么情况下页面会处于混杂模式呢?下面是列出的几种:
(1)不写<!DOCTYPE html>
(2)<!DOCTYPE html>前面加上xml声明 <?xml version="1.0" encoding="utf-8"?> (IE6)
(3)<!DOCTYPE html>和<?xml version="1.0" encoding="utf-8"?>之间加了(标签、文本、注释)(ie8以下都有,ie9以上未测)
(4)<!DOCTYPE html>前面有(标签、文本、注释)(ie8以下都有,ie9以上未测)
var pageWidth=window.innerWidth;
var pageHeight=window.innerHeight;
if(typeof pageWidth!="number")
{
if(document.compatMode=="CSS1Compat")
{
pageWidth=document.documentElement.clientWidth;
}
else{
pageWidth=document.body.clientWidth;
}
}