function wHeight(){
var _sh=Mathmax(documentbodyscrollHeight,documentdocumentElementscrollHeight);
var _ch=Mathmax(documentbodyclientHeight,documentdocumentElementclientHeight);
return Mathmax(_sh,_ch);
}
我一般用这个函数
html 最好加上<!doctype html>
function getWH(){
var wh = {};
"Height Width"replace(/[^\s]+/g,function(a){
var b = atoLowerCase();
wh[b]=window["inner"concat(a)]||
documentcompatMode ==="CSS1Compat" && documentdocumentElement["client"concat(a)]
|| documentbody["client"concat(a)];
});
return wh;
}
了解两个名词：BackCompat 标准兼容模式关闭（怪异模式）
CSS1Compat 标准兼容模式开启
这个方法为获取页面可视区域的高度，普通情况下，windowinnerHeight 即可获取，如果是正常模式，并且有clientHeight的情况下， documentdocumentElementclientHeight 获取的就是可视区域高度。在怪异模式下，是使用documentbody获取。
function getBodyWH(){
var wh = {};
"Height Width"replace(/[^\s]+/g,function(a){
var b = atoLowerCase();
wh[b]=documentcompatMode ==="CSS1Compat" && documentdocumentElement["scroll"concat(a)]
|| documentbody["scroll"concat(a)];
});
return wh;
}
这个为获取页面的高度，用于iframe的自适应时候获取。
var ss = {};
ssscrollTopFn = function(arg){
var a = navigatoruserAgenttoLowerCase()indexof("webkit");//判断webkit内核
var scrollTop;
if(a>-1||documentcompatMode =="BackCompat"){
thisscrollTopFn =function(arg){
if(typeof arg == 'number'){
documentbodyscrollTop = arg;
}else{
return documentbodyscrollTop;
}
}
}else{
thisscrollTopFn =function(arg){
if(typeof arg == 'number'){
documentdocumentElementscrollTop = arg;
}else{
return documentdocumentElementscrollTop;
}
}
}
return thisscrollTopFnapply(this,arguments);
}
Javascript:
网页可见区域宽： documentbodyclientWidth
网页可见区域高：
documentbodyclientHeight
网页可见区域宽： documentbodyoffsetWidth
(包括边线的宽)
网页可见区域高： documentbodyoffsetHeight (包括边线的高)
网页正文全文宽：
documentbodyscrollWidth
网页正文全文高： documentbodyscrollHeight
网页被卷去的高：
documentbodyscrollTop
网页被卷去的左： documentbodyscrollLeft
网页正文部分上：
windowscreenTop
网页正文部分左： windowscreenLeft
屏幕分辨率的高：
windowscreenheight
屏幕分辨率的宽： windowscreenwidth
屏幕可用工作区高度：
windowscreenavailHeight
屏幕可用工作区宽度： windowscreenavailWidth
JQuery:
$(document)ready(function(){alert($(window)height()); //浏览器当前窗口可视区域高度
alert($(document)height()); //浏览器当前窗口文档的高度
alert($(documentbody)height());//浏览器当前窗口文档body的高度
alert($(documentbody)outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window)width()); //浏览器当前窗口可视区域宽度
alert($(document)width());//浏览器当前窗口文档对象宽度
alert($(documentbody)width());//浏览器当前窗口文档body的宽度
alert($(documentbody)outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})
网页可见区域宽： documentbodyclientWidth
网页可见区域高： documentbodyclientHeight
网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)
网页可见区域高： documentbodyoffsetHeight (包括边线的高)
网页正文全文宽： documentbodyscrollWidth
网页正文全文高： documentbodyscrollHeight
网页被卷去的高： documentbodyscrollTop
网页被卷去的左： documentbodyscrollLeft
网页正文部分上： windowscreenTop
网页正文部分左： windowscreenLeft
屏幕分辨率的高： windowscreenheight
屏幕分辨率的宽： windowscreenwidth
屏幕可用工作区高度： windowscreenavailHeight
屏幕可用工作区宽度： windowscreenavailWidth
--------------这种问题网上一搜一大把，关键是要理解其中JS获取的原理----------
javascript screen对象获取屏幕宽高如alert(screenheight)
availHeight 属性 -- 窗口可以使用的屏幕高度，单位像素
availWidth 属性 -- 窗口可以使用的屏幕宽度，单位像素
colorDepth 属性 -- 用户浏览器表示的颜色位数，通常为32位(每像素的位数)
pixelDepth 属性 -- 用户浏览器表示的颜色位数，通常为32位(每像素的位数)（IE不支持)
height 属性 -- 屏幕的高度，单位像素
width 属性 -- 屏幕的宽度，单位像素
div设置定位,宽度高度设为屏幕一般半即可，至于居中的话可以绝对定位。
本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。
1介绍：介绍页面的容器(屏幕、浏览器及页面)、物理尺寸与分辨率、展示等内容。
2屏幕信息：介绍屏幕尺寸信息；如：屏幕、软件可用以及任务栏的高度和宽度。
3浏览器信息：介绍浏览器尺寸信息；如：浏览器、内部页面以及工具栏的高度和宽度。
4页面信息：介绍HTML页面尺寸信息；如：body总的、展示的高度和宽度。
一个页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。
HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。
通过Js的一些对象可以获取这些容器的高度、宽度。
容器的尺寸是指当前分辨率下的高度、宽度，而不是物理高度、宽度。
如：一个22寸的显示器，屏幕分辨率为1366 768，那么获取到的屏幕高度为1366px，宽度为768px。
screenheight ： 屏幕高度。
screenwidth ： 屏幕宽度。
screenavailHeight ： 屏幕可用高度。即屏幕高度减去上下任务栏后的高度，可表示为软件最大化时的高度。
screenavailWidth ： 屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度，可表示为软件最大化时的宽度。
任务栏高/宽度 ： 可通过屏幕高/宽度 减去 屏幕可用高/宽度得出。如：任务栏高度 = screenheight - screenavailHeight 。
windowouterHeight ： 浏览器高度。
windowouterWidth ： 浏览器宽度。
windowinnerHeight ： 浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。
windowinnerWidth ： 浏览器内页面可用宽度；此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。
工具栏高/宽度 ： 包含了地址栏、书签栏、浏览器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：windowouterHeight - windowinnerHeight。
bodyoffsetHeight ： body总高度。
bodyoffsetWidth ： body总宽度。
bodyclientHeight ： body展示的高度；表示body在浏览器内显示的区域高度。
bodyclientWidth ： body展示的宽度；表示body在浏览器内显示的区域宽度。
滚动条高度/宽度 ： 如高度，可通过浏览器内页面可用高度 - body展示高度得出，即windowinnerHeight - bodyclientHeight。
网页可见区域宽： documentbodyclientWidth
网页可见区域高： documentbodyclientHeight
网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)
网页可见区域高： documentbodyoffsetHeight (包括边线的高)
网页正文全文宽： documentbodyscrollWidth
网页正文全文高： documentbodyscrollHeight
网页被卷去的高： documentbodyscrollTop
网页被卷去的左： documentbodyscrollLeft
网页正文部分上： windowscreenTop
网页正文部分左： windowscreenLeft
屏幕分辨率的高： windowscreenheight
屏幕分辨率的宽： windowscreenwidth
屏幕可用工作区高度： windowscreenavailHeight
屏幕可用工作区宽度： windowscreenavailWidth
` font-family: PingFang SC,STHeitiSC-Light,Helvetica-Light,arial,sans-serif,Droid Sans Fallback;
<meta name="viewport" content="width=device-width, initial-scale=10, maximum-scale=10, user-scalable=0">
<body onselectstart="return false">
white-space: pre-wrap;
-webkit-tap-highlight-color: transparent;
注意到“pre-wrap”属性值：保留空白符序列，但是正常地进行换行。
white-space:pre-wrap;
filter: brightness(100); 变白
第二行变第一行不变
body{}
小程序上fixed成功过
一般这种都让ios或者安卓端禁止掉，然后在有d性需求的页面添加样式
overflow-y: scroll;
-webkit-overflow-scrolling : touch;
即可
-webkit-overflow-scrolling: touch;
//小程序 h5 交互
touches: 当前屏幕上所有触摸点的列表;
targetTouches: 当前对象上所有触摸点的列表;
changedTouches: 涉及当前(引发)事件的触摸点的列表
通过一个例子来区分一下触摸事件中的这三个属性：
1 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。
2 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时，targetTouches和touches的值相同，否则targetTouches 只有一个值。changedTouches此时只有一个值，
为第二个手指的触摸点，因为第二个手指是引发事件的原因
3 用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值
4 手指滑动时，三个值都会发生变化
5 一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。
6 手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，
此值为最后一个离开屏幕的手指的接触点。
3touchmove事件对象的获取
想要在touchmove:function(e,参数一)加一个参数，结果直接使用epreventDefault()就会 e 报错，处理方法为使用arguments[0]获取event参数
touchmove:function(e,参数一){
var e=arguments[0]
epreventDefault()
}
webpack-config dev-server 添加 disableHostCheck: true,
html的font-size还没设置的时候展示的样式是错误的
关于获取各种浏览器可见窗口大小的一点点研究
经本地测试和研究再次对 documentdocumentElementclientWidth 进行解释：
每一个html文件在浏览器中都会被解析为一个页面，documentdocumentElementclientWidth则是获取本页面的宽度。
下面进行举例子说明：
1） 如果在浏览器全屏，并且打开的一个标签页中只包含一个页面，则documentdocumentElementclientWidth即本页面的宽度=浏览器的宽度=屏幕可用工作区宽度：即windowscreenavailWidth;
2）当调整浏览器为非全屏状态时并且打开的一个标签页中只包含一个页面：则documentdocumentElementclientWidth即本页面的宽度=浏览器的宽度！=屏幕可用工作区宽度：即windowscreenavailWidth;
3）当打开的一个标签页中不只包含一个页面：比如在一个页面的frame中包含一个ifrme,该iframe指向另一个页面，如下所示
则iframe指向页面的documentdocumentElementclientWidth不再等于浏览器宽度，而是等于ifame的宽度
strInfo+=\r\n网页可见区域高:+documentbodyclientHeight;
strInfo+=\r\n网页可见区域宽:+documentbodyoffsetWidth+(包括边线的宽);
strInfo+=\r\n网页可见区域高:+documentbodyoffsetHeight+(包括边线的高);
strInfo+=\r\n网页正文全文宽:+documentbodyscrollWidth;
strInfo+=\r\n网页正文全文高:+documentbodyscrollHeight;
strInfo+=\r\n网页被卷去的高:+documentbodyscrollTop;
strInfo+=\r\n网页被卷去的左:+documentbodyscrollLeft;
strInfo+=\r\n网页正文部分上:+windowscreenTop;
strInfo+=\r\n网页正文部分左:+windowscreenLeft;
strInfo+=\r\n屏幕分辨率的高:+windowscreenheight;
strInfo+=\r\n屏幕分辨率的宽:+windowscreenwidth;
strInfo+=\r\n屏幕可用工作区高度:+windowscreenavailHeight;
strInfo+=\r\n屏幕可用工作区宽度:+windowscreenavailWidth;
windowconfirm(strInfo);
</script
-----------------------------------------------------------------------------------------
最近编程中发现html静态页面的开发可以使用
documentbodyClientHeight
来获得页面的高度，但aspnet的页面却无法这样获取，获取到的只是页面最小的高度，比如页面只有一个button，那么该js语句获得的就是24。
documentdocumentElementOffsetHeight
----------------------------------------------------------------------------------------加上documentbodyscrollLeft;
documentbodyscrollTop;
x=documentbodyclientWidth+documentbodyscrollLeft;
y=documentbodyclientHeight+documentbodyscrollTop;若想得到整个页面的高度可以用
以上就是关于我用的是window.body.scrollHeight全部的内容，包括:我用的是window.body.scrollHeight、如何获取页面可视区域的高度、PHP怎么获取屏幕的宽度与高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）