精华内容
下载资源
问答
  • //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border ...
  • 获取当前屏幕的高度宽度(JQuery/网页特效) Query获取浏览器窗口宽高,文档宽高 2010-01-20 08:59 $(document).ready(function()  ...
    获取当前屏幕的高度宽度(JQuery/网页特效)




    Query获取浏览器窗口宽高,文档宽高


    2010-01-20 08:59



    js





    网页可见区域宽: document.body.clientWidth
    网页可见区域高: document.body.clientHeight
    网页可见区域宽: document.body.offsetWidth (包括边线的宽)
    网页可见区域高: document.body.offsetHeight (包括边线的高)
    网页正文全文宽: document.body.scrollWidth
    网页正文全文高: document.body.scrollHeight
    网页被卷去的高: document.body.scrollTop
    网页被卷去的左: document.body.scrollLeft
    网页正文部分上: window.screenTop
    网页正文部分左: window.screenLeft
    屏幕分辨率的高: window.screen.height
    屏幕分辨率的宽: window.screen.width
    屏幕可用工作区高度: window.screen.availHeight
    屏幕可用工作区宽度: window.screen.availWidth


    实例


    //js获取当前窗口的宽度高度。获取窗口尺寸


    WE.getWndSize = function() {


        var w = 0, h = 0;


        if (window.innerWidth && window.innerHeight) {


            w = window.innerWidth;


            h = window.innerHeight;


        } else if (document.documentElement) {


            w = document.documentElement.clientWidth;


            h = document.documentElement.clientHeight;


        } else if (document.body.clientWidth && document.body.clientHeight) {


            w = document.body.clientWidth;


            h = document.body.clientHeight;


        }


        return { width: w, height: h };


    }
    from:http://www.111cn.net/wy/js-ajax/39256.htm

    来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/29896512/viewspace-1282082/,如需转载,请注明出处,否则将追究法律责任。

    转载于:http://blog.itpub.net/29896512/viewspace-1282082/

    展开全文
  • JQuery获取浏览器窗口宽高,文档宽高代码,使用jquery朋友可以参考下。 1 2 <script type="text/javascript"> 3 $(document).ready(function() 4 { 5 alert($(window).height()); //...

    JQuery获取浏览器窗口宽高,文档宽高的代码,使用jquery的朋友可以参考下。

     1  
     2 <script type="text/javascript"> 
     3 $(document).ready(function() 
     4 { 
     5 alert($(window).height()); //浏览器当前窗口可视区域高度 
     6 alert($(document).height()); //浏览器当前窗口文档的高度 
     7 alert($(document.body).height());//浏览器当前窗口文档body的高度 
     8 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin 
     9 alert($(window).width()); //浏览器当前窗口可视区域宽度 
    10 alert($(document).width());//浏览器当前窗口文档对象宽度 
    11 alert($(document.body).width());//浏览器当前窗口文档body的高度 
    12 alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin 
    13 } 
    14 ) 
    15 </script> 

     

    转载于:https://www.cnblogs.com/lodingzone/p/4839021.html

    展开全文
  • 阅读数:26120网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线宽)网页可见区域高:document.body.offsetHeight (包括...

    阅读数:26120

    网页可见区域宽:document.body.clientWidth

    网页可见区域高:document.body.clientHeight

    网页可见区域宽:document.body.offsetWidth (包括边线的宽)

    网页可见区域高:document.body.offsetHeight (包括边线的宽)

    网页正文全文宽:document.body.scrollWidth

    网页正文全文高:document.body.scrollHeight

    网页被卷去的高:document.body.scrollTop

    网页被卷去的左:document.body.scrollLeft

    网页正文部分上:window.screenTop

    网页正文部分左:window.screenLeft

    屏幕分辨率的高:window.screen.height

    屏幕分辨率的宽:window.screen.width

    屏幕可用工作区高度:window.screen.availHeight

    屏幕可用工作区宽度:window.screen.availWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    scrollHeight: 获取对象的滚动高度。

    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

    scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

    scrollWidth:获取对象的滚动宽度

    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

    offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

    event.clientX 相对文档的水平座标

    event.clientY 相对文档的垂直座标

    event.offsetX 相对容器的水平坐标

    event.offsetY 相对容器的垂直坐标

    document.documentElement.scrollTop 垂直方向滚动的值

    event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

    IE,FireFox 差异如下:

    IE6.0、FF1.06+:

    clientWidth = width + padding

    clientHeight = height + padding

    offsetWidth = width + padding + border

    offsetHeight = height + padding + border

    IE5.0/5.5:

    clientWidth = width - border

    clientHeight = height - border

    offsetWidth = width

    offsetHeight = height

    (需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

    网页可见区域宽: document.body.clientWidth

    网页可见区域高: document.body.clientHeight

    网页可见区域宽: document.body.offsetWidth (包括边线的宽)

    网页可见区域高: document.body.offsetHeight (包括边线的高)

    网页正文全文宽: document.body.scrollWidth

    网页正文全文高: document.body.scrollHeight

    网页被卷去的高: document.body.scrollTop

    网页被卷去的左: document.body.scrollLeft

    网页正文部分上: window.screenTop

    网页正文部分左: window.screenLeft

    屏幕分辨率的高: window.screen.height

    屏幕分辨率的宽: window.screen.width

    屏幕可用工作区高度: window.screen.availHeight

    屏幕可用工作区宽度: window.screen.availWidth

    -------------------

    技术要点

    本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。

    要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要 深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

    Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

    Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

    document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

    实现代码

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    请调整浏览器窗口

    请调整浏览器窗口大小

    浏览器窗口 的 实际高度:

    浏览器窗口 的 实际宽度:

    var winWidth = 0;

    var winHeight = 0;

    function findDimensions() //函数:获取尺寸

    {

    //获取窗口宽度

    if (window.innerWidth)

    winWidth = window.innerWidth;

    else if ((document.body) && (document.body.clientWidth))

    winWidth = document.body.clientWidth;

    //获取窗口高度

    if (window.innerHeight)

    winHeight = window.innerHeight;

    else if ((document.body) && (document.body.clientHeight))

    winHeight = document.body.clientHeight;

    //通过深入Document内部对body进行检测,获取窗口大小

    if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

    {

    winHeight = document.documentElement.clientHeight;

    winWidth = document.documentElement.clientWidth;

    }

    //结果输出至两个文本框

    document.form1.availHeight.value= winHeight;

    document.form1.availWidth.value= winWidth;

    }

    findDimensions();

    //调用函数,获取数值

    window.οnresize=findDimensions;

    //-->

    源程序解读

    (1)程序首先建立一个表单,包含两个文本框,用于显示窗口当前的宽度和高度,并且,其数值会随窗口大小的改变而变化。

    (2)在随后的JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口的高度值和宽度值。

    (3)然后,在函数findDimensions ( )中,使用window.innerHeight和window.innerWidth得到窗口的高度和宽度,并将二者保存在前述两个变量中。

    (4)再通过深入Document内部对body进行检测,获取窗口大小,并存储在前述两个变量中。

    (5)在函数的最后,通过按名称访问表单元素,结果输出至两个文本框。

    (6)在JavaScript代码的最后,通过调用findDimensions ( )函数,完成整个操作。

    展开全文
  • ### 前因目前移动端布局,以响应式布局居多,以适应在不同分辨率的屏幕,实现布局方式可能有很多种,但是不管使用哪种方式,获取设备可用宽高就能为问题关键。### 宽高的获取“`document.documentElement....

    ### 前因

    目前的移动端布局,以响应式布局居多,以适应在不同分辨率的屏幕,实现布局的方式可能有很多种,但是不管使用哪种方式,获取设备的可用宽高就能为问题的关键。

    ### 宽高的获取

    “`

    document.documentElement.clientWidth

    document.documentElement.clientHeight

    document.body.clientWidth

    document.body.clientHeight

    window.innerWidth

    window.innerHeight

    screen.availWidth

    screen.availHeight

    screen.width

    screen.height

    “`

    常用的获取方式,也就上述的几种,还有一些其他的我们这里,暂时不做考虑。

    接下来,我们默认文档声明为HTML5的文档声明,默认使用`IOS`的`safari`为测试浏览器,来做一些简单的测试。

    ### 空白页,上述属性的取值

    查看截图,分别为横屏和竖屏时候的取值。

    ![Alt text](http://www.zhangyunling.com/study/2018/20180311/2.png)

    ![Alt text](http://www.zhangyunling.com/study/2018/20180311/1.jpg)

    您也可以直接访问:[示例](/study/2018/20180311/index.html)

    这是在没有设置任何属性的情况下,得到的宽高的取值如上图所示:

    其中,每一个取值,都是包含宽和高,比如拿`screen.width = 375-667`为例,其实代表了:`screen.width= 375,screen.height = 667`。其他都类似。

    那么接下来,我们就顺便来看看,每一个属性有什么影响?

    这里,为了能更方便的对比,我们就不按照属性从上到下的顺序来看了,首先要看的是最稳定的数据。

    #### screen.availWidth和screen.width

    `screen`是设备的屏幕对象,理论上,当一个设备固定之后,那么这个设备的屏幕的可视宽度和高度也是固定的,所以这里也可以看出

    在上述的横屏和竖屏时,得到的数据,都是一致的:

    “`

    screen.availWidth = 375px;

    screen.width = 667px;

    “`

    并且,有一点需要注意的是,不管横屏还是竖屏,宽高都是相同,也就代表着,这两个属性,在任意情况下,都是不变的,并且其取值是按照竖屏时的属性,进行取值的。

    接下来,我们就按照375和667为例,来看看其他的属性,都是如何取值的。

    #### window.innerWidth与document.documentElement.clientWidth。

    得到的结果(仅拿window.innerWidth与window.innerHeight)

    “`

    // 竖屏时 ,未全屏

    window.innerWidth = 375

    window.innerHeight = 553;

    // 横屏时,全屏

    window.innerWidth = 667

    window.innerHeight = 375;

    “`

    可以看如上的两幅图,这两个属性得到的值,也是完全相同,但是在横屏和竖屏时的属性值,却是不同的。

    这个不同主要来自于两个方面:

    1. 横屏时,宽高调换了

    2. 竖屏时,浏览器没有全屏显示。

    所以,先看横屏全屏显示时,宽高正好就是设备可视区域的宽高,也是375与667,只是,宽是667,高是375。

    竖屏时,由于存在了手机的状态栏,浏览器的导航栏和控制栏,所以,结果宽度是375,高度却只有553,也就是说,手机状态栏,浏览器导航栏和控制栏,占去了667-553=114的高度。

    所以,window.innerWidth,window.innerHeight,document.documentElement.clientWidth,document.documentElement.clientHeight这几个属性,是取的浏览器内部的可视宽高,即浏览器一屏的宽高。

    #### document.body.clientWidth 与document.body.clientHeight

    这个我们可以见简单的这么理解,body元素的宽度或者高度。

    而在横屏和竖屏时,取得的值入下:

    “`

    // 竖屏

    clientWidth = 375

    clientHeight = 150

    // 横屏

    clientWidth = 667

    clientHeight = 165

    “`

    因为我在页面上设置了所有的元素的margin:0px;padding:0px;所有,body的宽度,就是浏览器可视区域的宽度,当竖屏和横屏时,会跟着变化。

    而body的内容高度,则由body内部元素撑起的实际高度确定,设置body宽度账户,这两个属性的值,可以自己尝试去试试看结果。

    ### 结束

    为什么这里要说一下这个呢,因为在移动端弹性布局中,rem单位布局,是一个很常用的方案,而对于rem的计算,就是需要我们了解到,需要用什么属性,来作为这个确认rem的基准数值,如果我们不能很好的理解,那么就可能导致在竖屏和转屏时,出现一些异常。

    至于如何实现rem的基准计算,这里就不做说明了,仅做参考。

    展开全文
  • 在实际自动化项目运行过程中,很多...下面我们来总结下常用截图方法:方法1:save_screenshot() 该方法直接保存当前屏幕截图到当前脚本所在文件位置。 driver.save_screenshot('login.png')方法2:get_screensho...
  • var w1 = window.screen.width //获取手机屏幕的宽 ,在实际上线的时候使用 window.onload = function(){ if(w ){ window.location.assign(‘tf/index.html‘); }else{ window.location.assign(‘sh/index.html‘)...
  • 此文为摘要,内容不全,原文包含了详细代码分析,请到 https://zwcloud.net/#blog/109 查看环境: Unreal Engine 4.25.2此文主要分析移动端(ES3.1)从地形高度图到最终渲染顶点高度的流程,顺带说明一下顶点在X...
  • Toast toast; toast=Toast.makeText(this, "toast", Toast.LENGTH_LONG); toast.setGravity(gravity, xOffset, yOffset);...//可以通过或者当前屏幕的高度和宽度来设置需要显示的toast的位置. Di...
  • export default {data() {return {positionX: 0,positionY: 0,innerHeight: 0,innerWidth: 0,};},methods: {// 返回首页goHome() {...},/* 阻止移动端屏幕默认滑动 */default (e) {let divv = document.getElement...
  • 获取当前屏幕各种高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线宽) 网页可见区域高: document.body....
  • js获取浏览器当前屏幕的宽度和高度

    千次阅读 2018-07-23 22:50:26
     document.documentElement 2.获取body元素  document.body 3.兼容所有浏览器获取当前屏幕的宽度。 ... var winWidth = document.body.clientWidth || document....4.兼容所有浏览器获取当前屏幕的高度。 ...
  • js或jQuery获取当前屏幕的各种高度

    千次阅读 2019-05-03 16:53:31
    js或jQuery获取当前屏幕的各种高度 一、参考地址: js或jQuery获取当前屏幕的各种高度 jquery监控浏览窗口尺寸变化执行相应的代码 二、 1、Javascript: 网页可见区域宽: document.body.clientWidt...
  • 获取当前屏幕的宽度和高度

    千次阅读 2017-10-30 13:57:30
    在使用JS的时候经常遇到的问题就是我需要获取当前屏幕的宽度和高度。每每到这个时候不知道使用哪个:1 2 3 widow.document.body.offsetWidth; window.screen.availWidth; window.screen.width;一上图(PC端)为...
  • javascript或jquery获取当前屏幕的各种高度 javascript 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页...
  • 依赖于英文字母小 x 的高度 ch 数字 0 的宽度 rem 根元素(html)的 font-size vw viewpoint width,视窗宽度,1vw=视窗宽度的1% vh viewpoint height,视窗高度,1vh=视窗高度的1% vmin ...
  • jq 获取当前屏幕高度

    2019-10-02 00:23:19
    alert($(window).height());... //浏览器时下窗口文档的高度 alert($(document.body).height());//浏览器时下窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器时下窗口...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 615
精华内容 246
关键字:

获取当前屏幕的高度