pc浏览器css和js计算浏览器宽度的差异以及和滚动条的关系
如图:
css宽度:1250 不包括滚动条宽度
用控制台箭头选取元素显示的左边的宽度:1250 不包含滚动条宽度
缩放浏览器右上角显示的宽度:1267 包含了滚动条宽度
再看下控制台:
由此可计算浏览器滚动条宽度为:
window.innerWidth - $(window).width()
window.innerWidth: 包含滚动条的宽度
$(window).width(): 不包含滚动条宽度
document相关的方法都不包含滚动条宽度
总结:
包含滚动条的只有两个:
window.innerWidth 和 缩放浏览器右上角显示的宽度(谷歌浏览器)
其余的css和js获取的宽度都是不包含滚动条宽度的
如有错误请及时指正
pc浏览器css和js计算浏览器宽度的差异以及和滚动条的关系的更多相关文章
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...
- css 垂直居中,指定文本宽度换行,指定高度出滚动条
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g ...
- JS 获取浏览器和屏幕宽高等信息代码
JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:doc ...
- 【转】javascript浏览器参数的操作,js获取浏览器参数
原文地址:http://www.haorooms.com/post/js_url_canshu html5修改浏览器地址:http://www.cnblogs.com/JiangXiaoTian/ar ...
- js关闭浏览器窗口事件
js关闭浏览器窗口 js关闭浏览器窗口,不弹出提示框.支持ie6+,火狐,谷歌等浏览器. <html> <head /> <body> <script typ ...
- js关闭浏览器窗口及检查浏览器关闭事件
js关闭浏览器窗口,不弹出提示框.支持ie6+,火狐,谷歌等浏览器,下面以一个示例为大家详细介绍下具体的实现方法,感兴趣的朋友可以参考下 js关闭浏览器窗口 js关闭浏览器窗口,不弹出提示框.支持 ...
- 有关css和js针对不同浏览器兼容的问题
首先谈一下浏览器,虽然现在ie依然是浏览器市场的老大,大约占有67%的份额,但是由于其各方面的欠缺,用户开始选择其他浏览器作为自己浏览网页的主要 工具,比如firefox.theworld.maxth ...
- js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...
随机推荐
- awk完全手册
awk简介 2. awk命令格式和选项 2.1. awk的语法有两种形式 2.2. 命令选项3. 模式和操作 3.1. 模式 3.2. 操作4. awk的环境变量 5. awk运算符 6. 记录和域 ...
- 6 个 Linux 运维典型问题
作为一名合格的 Linux 运维工程师,一定要有一套清晰.明确的解决故障思路,当问题出现时,才能迅速定位.解决问题,这里给出一个处理问题的一般思路: 重视报错提示信息:每个错误的出现,都是给出错误提示 ...
- 用Lua定制Redis命令
* { color: #3e3e3e } body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans ...
- 理解DNS
理解DNS 写在前面: 目前,我们大部分的网络通信都是基于TCP/IP协议的,而TCP/IP又基于IP地址作为唯一标识进行通信,随着需要记忆的IP地址数量的增多,肯定会超出我们的记忆能力范围,但如果使 ...
- java基础(六) switch语句的深入解析
引言 switch 语句是非常的基础的知识,掌握起来也不难掌握,语法比较简单.但大部分人基本是知其然,不知其所以然.譬如 早期JDK只允许switch的表达式的值 int及int类型以下的基本类型 ...
- wpf timePicker 时间选择控件
wpf里有日期选择控件,但没有时间选择控件.其他地方也有类似的,但效果并不太好,而且复杂.所以就自己写了个.参考codeproject上的. 分两部分. 第一部分是.cs文件.也就是control控件 ...
- Java中native关键字[转]
原文链接:http://blog.163.com/yueyemaitian@126/blog/static/21475796200701491621267/ 今日在hibernate源代码中遇到了na ...
- 洛谷 [P1119] 灾后重建
我们发现每次询问都是对于任意两点的,所以这是一道多源最短路径的题,多源最短路径,我们首先想到floyd,因为询问的时间是不降的,所以对于每次询问,我们将还没有进行松弛操作的的点k操作. #includ ...
- BZOJ 2034: [2009国家集训队]最大收益 [贪心优化 Hungary]
2034: [2009国家集训队]最大收益 题意:\(n \le 5000\)个区间\(l,r\le 10^8\),每个区间可以选一个点得到val[i]的价值,每个点最多选1次,求最大价值 线段树优化 ...
- 跨域资源请求(除jsonp以外)的方法
---------------------------------------------------------------------------------------------------- ...