美文网首页
js中查看浏览器宽度

js中查看浏览器宽度

作者: 王二麻子88 | 来源:发表于2020-10-12 10:53 被阅读0次

js中查看浏览器宽度

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

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

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

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

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

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

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

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

9 网页正文部分上:window.screenTop

10 网页正文部分左:window.screenLeft

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

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

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

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

15 正文底部的高度: scrollBottom = document.body.scrollHeight - (window).scrollTop() -(window).height();

17 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
18 scrollHeight: 获取对象的滚动高度。
19 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
20 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
21 scrollWidth:获取对象的滚动宽度
22 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
23 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
24 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
25 event.clientX 相对文档的水平座标
26 event.clientY 相对文档的垂直座标
27 event.offsetX 相对容器的水平坐标
28 event.offsetY 相对容器的垂直坐标
29 document.documentElement.scrollTop 垂直方向滚动的值
30 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
31
32 IE,FireFox 差异如下:
33
34 IE6.0、FF1.06+:
35 clientWidth = width + padding
36 clientHeight = height + padding
37 offsetWidth = width + padding + border
38 offsetHeight = height + padding + border
39
40 IE5.0/5.5:
41 clientWidth = width - border
42 clientHeight = height - border
43 offsetWidth = width
44 offsetHeight = height
45
46 (需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
47 网页可见区域宽: document.body.clientWidth
48 网页可见区域高: document.body.clientHeight
49 网页可见区域宽: document.body.offsetWidth (包括边线的宽)
50 网页可见区域高: document.body.offsetHeight (包括边线的高)
51 网页正文全文宽: document.body.scrollWidth
52 网页正文全文高: document.body.scrollHeight
53 网页被卷去的高: document.body.scrollTop
54 网页被卷去的左: document.body.scrollLeft
55 网页正文部分上: window.screenTop
56 网页正文部分左: window.screenLeft
57 屏幕分辨率的高: window.screen.height
58 屏幕分辨率的宽: window.screen.width
59 屏幕可用工作区高度: window.screen.availHeight
60 屏幕可用工作区宽度: window.screen.availWidth


关于boostrap的响应式样式

  • .col-xs-* 超小屏幕 手机 (<768px)
  • .col-sm-* 小屏幕 平板 (≥768px)
  • .col-md-* 中等屏幕 桌面显示器 (≥992px)
  • .col-lg-* 大屏幕 大桌面显示器 (≥1200px)

也就是说:

  • 小于 768px 的时候,用 col-xs-12 类对应的样式:
  • 在 768px 到 992px 之间的时候,用 col-sm-9 类对应的样式;
  • 在 992px 到 1200px 之间的时候,用 col-md-6 类对应的样式;
  • 大于 1200px 的时候,用 col-lg-3 类对应的样式;

相关文章

  • js中查看浏览器宽度

    js中查看浏览器宽度 1 网页可见区域宽:document.body.clientWidth 2 网页可见区域高:...

  • JS获取屏幕大小

    JS获取屏幕大小 JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

  • js 获取浏览器高度和宽度值(多浏览器)

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器。 IE中:document.body.clientWidth =...

  • 各浏览器获取屏幕宽度方法

    JS获取浏览器窗口大小 //获取窗口宽度 if (window.innerWidth) winWidth = wi...

  • 2019-05-10

    获取浏览器和屏幕各种高度宽度 原生JS document.body.clientWidth; //网...

  • 事件监听断点

    chrome浏览器不能直接查看js内容,但是可以在通过打断点查看运行的js 利用sources的Event Lis...

  • vue-xlsx-table: 在浏览器中查看xlsx或xls表

    vue-xlsx-table 无需上传,在浏览器中查看xlsx或xls表格,由js-xlsx驱动.在线例子 依赖 ...

  • chrome 调试Node.js代码

    chrome 调试Node.js代码 添加--inspect 步骤 编写代码 app.js 使用命令 浏览器查看 ...

  • JS中的宽度

    现实世间里,一个物体的宽度是明确的、没有异议的,而在JS的世界里,却有好几种获取div宽度的方法,有时这些方法获取...

  • CSS布局

    单列布局 模型 一栏布局 查看链接:点击查看 最大宽度属性max-width 1.在CSS中,最大宽度属性(max...

网友评论

      本文标题:js中查看浏览器宽度

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