网页与浏览器窗口の真理

tinysun1234 发布于2019-08-30 12:44 / 1097人阅读

摘要：参考资料首先，网页大小与浏览器窗口大小从来都不是一回事这尼玛最近才明白，坑所以，要知道以下常网页的范围我们在代码里面设置的或者脚本，改变的样式就是网页范围下的改变，也就是说，我们设置的大小是网页的不是浏览器窗口的大小。

参考资料

首先，网页大小与浏览器窗口大小从来都不是一回事！！！这尼玛最近才明白，坑~

所以，要知道以下常:

网页的范围
我们在代码里面设置的CSS或者js脚本，改变的样式就是网页范围下的改变，也就是说，我们设置的CSS大小是网页的不是浏览器窗口的大小。

浏览器窗口
浏览器窗口中看到的那部分实时动态的网页面积，又叫做viewport（视口）。

为什么说是实时动态的窗口？
比如，我上班时偷偷的新窗口打开淘宝，然后把窗口调的很小，这样老大就不会发觉拉。这样一来，本来全屏的窗口变成了小窗口，因此浏览器的窗口大小也就被改变了。

在不出现各种滚动条的情况下，viewport的大小和网页的大小是相同的。

获取网页的大小的方法1

clientHeight和clientWidth属性。这两个属性指元素的内容部分再加上padding的所占据的视觉面积，不包括border和滚动条占用的空间。
获取body的这两个属性，可以得出网页的大小。

盗个图说明一下：

再盗个代码

function getViewport(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}

注意事项

这个函数必须在页面加载完成后才能运行，否则document对象还没生成，浏览器会报错。

大多数情况下，都是document.documentElement.clientWidth返回正确值。但是，在IE6的quirks模式中，document.body.clientWidth返回正确的值，因此函数中加入了对文档模式的判断。

clientWidth和clientHeight都是只读属性，不能对它们赋值。

获取网页的大小的方法2

document对象的scrollHeight和scrollWidth属性就是网页的大小，意思就是滚动条滚过的所有长度和宽度。

function getPagearea(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: Math.max(document.body.scrollWidth,
　　　　　　　　　　　　　　　　document.body.clientWidth),
　　　　　　　　height: Math.max(document.body.scrollHeight,
　　　　　　　　　　　　　　　　document.body.clientHeight)
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: Math.max(document.documentElement.scrollWidth,
　　　　　　　　　　　　　　　　document.documentElement.clientWidth),
　　　　　　　　height: Math.max(document.documentElement.scrollHeight,
　　　　　　　　　　　　　　　　document.documentElement.clientHeight)
　　　　　　}
　　　　}
　　}

元素的绝对位置

详见参考资料里面的函数

网页元素的相对位置

详见参考资料里面的函数

获取元素位置的快速方法

getBoundingClientRect():返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。

　　var X= this.getBoundingClientRect().left;
　　var Y =this.getBoundingClientRect().top;

再加上滚动距离，就可以得到绝对位置

　　var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
　　var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

目前，IE、Firefox 3.0+、Opera 9.5+都支持该方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。

云服务器 GPU云服务器安卓窗口浏览器真理云服务器网页弹出窗口弹不出来网页浏览器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115029.html

Javascript事件代理の真理

摘要：参考资料事件代理很久很久以来，总感觉事件发生与事件代理到之间没什么鸟区别。要搞清楚什么是事件代理，就需要先搞清楚什么是代理。，怎么从字面来理解事件代理一词的含义后文有讲。于是，看了事件代理的资料。这一过程被称为事件冒泡。参考资料：js-事件代理很久很久以来，总感觉事件发生与事件代理到之间没什么鸟区别。最近，又看了一下，感觉区别其实真不大！看怎么理解吧。要搞清楚什么是事件代理，就...

lijy91 2019-08-19 17:32 评论0 收藏0
前端修炼の道：第一个 HTML 页面

摘要：可见对一个页面正确渲染很重要。和标签对用于标识页面的头部区域，和之间的内容都属于头部区域中的内容。是一个辅助性标签，对页面可以进行很多方面的特性的设置。当页面没有设置字符集时，浏览器会使用默认的字符编码显示。 showImg(https://segmentfault.com/img/bVbjNkI?w=900&h=383); 往期回顾在 1.2 节介绍 HTML 语言时讲到：HTML...

JasonZhang 2019-08-26 13:23 评论0 收藏0
前端修炼の道 | 如何成为一名合格前端开发工程师？

摘要：上期回顾在上一节我们已了解前端开发是做什么的，现在的问题是，如何才能成为一名合格的前端开发工程师相信这个问题是大家比较关心的。 showImg(https://segmentfault.com/img/bVbi9ks?w=900&h=383);上期回顾在上一节我们已了解前端开发是做什么的，现在的问题是，如何才能成为一名合格的前端开发工程师？相信这个问题是大家比较关心的。前端开发工...

Jackwoo 2019-08-23 12:50 评论0 收藏0
每日 30 秒 ⏱ H1 の小秘密

showImg(https://segmentfault.com/img/remote/1460000018747727?w=900&h=500); 简介 heading 标签、SEO、无障碍阅读 ps: 内容有点多，本来只想讲一个点，但是关联性太强了，所以辛苦大家了。在学习 HTML 标签的时候，很多教程只告诉你怎么用而没有讲清楚是什么，让我们一起从 h1 到 h6 开始重新认识 HTM...

blastz 2019-08-23 16:42 评论0 收藏0
重学 html の meta 标签

摘要：标签的个属性。缓存所有响应，但并非必须。只为单个用户缓存，因此不允许任何中继进行缓存。比如说就不允许缓存的响应表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。 meta简介网页元数据，常用于定义网页的编码、说明、关键字、修改日期及其他信息。这些数据服务于浏览器、搜索引擎等。 meta 标签的2个属性name, http-equiv。。 name 属性 ...

guyan0319 2019-08-02 16:15 评论0 收藏0