美文网首页
可视区,页面内容,浏览器宽高

可视区,页面内容,浏览器宽高

作者: sunningcarry | 来源:发表于2017-08-12 11:47 被阅读479次
  • 可视区域:可显示网页内容的区域。
    • 打开浏览器的控制台,拉动控制台宽/高的时候网页可视区域的宽高也会随之改变,所以可视区域可随意改变。

    • 可视区宽高跟网页内容宽高没关系。

    • 那可以理解为:可视区域 = 浏览器的页面显示部分

    • 先普及一下关于浏览器宽高知识点(了解的可以跳过):


      image.png
      • window.outerHeight :浏览器高度。
      • window.outerWidth :浏览器宽度。
      • window.innerHeight :浏览器内页面可用高度;此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度减去浏览器边框、工具条后的高度。
      • window.innerWidth :浏览器内页面可用宽度;此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度减去浏览器边框后的宽度。
      • 工具栏高/宽度 :包含了地址栏、书签栏、浏览器边框等范围。如:高度,可通过浏览器高度 - 页面可用高度得出,即:window.outerHeight - window.innerHeight。
  • 可视区域宽高 = window.innerHeight,可随着浏览器窗口大小自动改变
    jq获取可视区域宽高:$(window).height();

  • 页面内容
    • 页面内容宽高:指网页htrml中body的宽高
    • 普及一下关于网页内容的知识点(了解可跳过)
image.png
  • 具体
    • body.offsetHeight :body总高度。

    • body.offsetWidth :body总宽度。

    • body.clientHeight :body展示的高度;表示body在浏览器内显示的区域高度。

    • body.clientWidth :body展示的宽度;表示body在浏览器内显示的区域宽度。

    • 滚动条高度/宽度 :如高度,可通过浏览器内页面可用高度 - body展示高度得出,即window.innerHeight - body.clientHeight。

  • 页面宽高 = document.body.clientHeight
    jq:获取页面宽高:$(document.body).height();

详细1
详细2

相关文章

  • 可视区,页面内容,浏览器宽高

    可视区域:可显示网页内容的区域。打开浏览器的控制台,拉动控制台宽/高的时候网页可视区域的宽高也会随之改变,所以可视...

  • 获取宽高、加载(DOM)、currentStyle、getCom

    鼠标在可视区中的坐标 获取可视区宽高 获取滚动距离 获取内容宽高 获取盒子模型宽高 获取元素的相对位置 获取元素的...

  • js 中的一些位置方法

    1 , 获取浏览器可视区的宽高 document.documentElement.cl...

  • web前端常见问题总结:(持续更新)

    一、常见的关于浏览器宽高相关问题: 1. 获取浏览器的宽高,不包括工具栏和滚动条即可视区的宽高 1)对于IE9+、...

  • 常用的BOM方法

    1.可视区域尺寸 1.1 DOM方法: 1.2 BOM方法:(适用于高版本浏览器) 1.3 元素的宽高 2.滚动距...

  • flex常用布局

    Sticky Footer 当页面内容高度小于可视区域高度时,footer 吸附在底部;当页面内容高度大于可视区域...

  • BOM基础操作

    打开关闭窗口 userAgent loction loction的search hash 可视区宽高,文档宽高,滚...

  • 页面元素宽高及位置获取方法

    在青春中探索,在岁月中沉淀、在失去中珍惜。 一、获取页面可视宽高 获取可视高 获取可视宽 二、获取页面内容宽高 获...

  • DOM-client家族及事件冒泡9

    client 02-三大家族的区别.html 03-浏览器可视区域宽高.html 05-检测屏幕宽度.html 事...

  • clientHeight,offsetHeight,scroll

    一张图解决所有问题: clientHeight: 内容可视区域的高度,也就是说页面浏览器的大小,可以看到内容的区域...

网友评论

      本文标题:可视区,页面内容,浏览器宽高

      本文链接:https://www.haomeiwen.com/subject/qvyelxtx.html