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 ...
随机推荐
- Docker for Web Developers目录
在OpenStack在私有云占主导定位之后,后起之秀Docker在PaaS平台.CI/CD.微服务领域展露锋芒.作为Web Developers,我们有必要学习和掌握这门技术. 1. 运行第一个Doc ...
- flex基本概念
基本使用 任何一个容器都可以指定为flex布局 .box { display: flex; } 行内元素也可以使用flex .box { display: inline-flex; } Webkit内 ...
- HTML中的表单
1.HTML中表单元素的基本概念 HTML表单是HTML元素中较为复杂的部分,表单往往和脚本,动态页面,数据处理等功能相结合,因此是制作动态网站很重要的内容. 表单一般用来收集用户的输入信息 2.表单 ...
- 论事件驱动与异步IO
通常我们写服务器模型,有以下几种模型: 每收到一个请求,创建一个新的进程,来处理该请求 每收到一个请求,创建一个新的线程,来处理该请求 每收到一个请求,放入到一个事件中,让主程序通过非阻塞I/0方式来 ...
- 基本c功能使用不当导致崩溃
一些基本的c语言操作,使用不当也会有出其不意的问题.比如我最近的一个项目中,用到几句代码: uint8_t * out_pcm = NULL; ....... if (NULL == out_pcm) ...
- 无线渗透测试之wifi密码破解
[声明]:本文仅供个人学习使用,请勿违法破解他人wifi 测试工具: 1.CDlinux启动盘:(请参照https://my.oschina.net/u/3112136/blog/800713) 2. ...
- Hadoop学习笔记五
一.uber(u:ber)模式 MapReduce以Uber模式运行时,所有的map,reduce任务都在一个jvm中运行,对于小的mapreduce任务,uber模式的运行将更为高效. uber模式 ...
- Spring单元测试
1.基于AbstractDependencyInjectionSpringContextTests Spring的单元测试可以使用AbstractDependencyInjectionSpringCo ...
- Python基础篇(五)
bool用于判断布尔值的结果是True还是False >>> bool("a") True >>> bool(3) True >>& ...
- MySQL5学习笔记(三)
系统变量 mysqld服务器维护两种变量.全局变量(GLOBAL)影响服务器整体操作.会话变量(SESSION)影响具体客户端连接的操作. 当服务器启动时,它将所有全局变量初始化为默认值.这些 ...