如图：

css宽度：1250 不包括滚动条宽度

用控制台箭头选取元素显示的左边的宽度：1250  不包含滚动条宽度

缩放浏览器右上角显示的宽度：1267 包含了滚动条宽度

再看下控制台：

由此可计算浏览器滚动条宽度为：

window.innerWidth - $(window).width()

window.innerWidth： 包含滚动条的宽度

$(window).width()： 不包含滚动条宽度

document相关的方法都不包含滚动条宽度

总结： 

包含滚动条的只有两个:

window.innerWidth 和 缩放浏览器右上角显示的宽度（谷歌浏览器）

其余的css和js获取的宽度都是不包含滚动条宽度的

如有错误请及时指正

pc浏览器css和js计算浏览器宽度的差异以及和滚动条的关系的更多相关文章

  1. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  2. 转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks

    [总结]浏览器CSS Hacks汇总   浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...

  3. css 垂直居中，指定文本宽度换行,指定高度出滚动条

    !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g ...

  4. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

  5. 【转】javascript浏览器参数的操作，js获取浏览器参数

    原文地址:http://www.haorooms.com/post/js_url_canshu html5修改浏览器地址:http://www.cnblogs.com/JiangXiaoTian/ar ...

  6. js关闭浏览器窗口事件

    js关闭浏览器窗口 js关闭浏览器窗口,不弹出提示框.支持ie6+,火狐,谷歌等浏览器. <html> <head /> <body> <script typ ...

  7. js关闭浏览器窗口及检查浏览器关闭事件

    js关闭浏览器窗口,不弹出提示框.支持ie6+,火狐,谷歌等浏览器,下面以一个示例为大家详细介绍下具体的实现方法,感兴趣的朋友可以参考下   js关闭浏览器窗口 js关闭浏览器窗口,不弹出提示框.支持 ...

  8. 有关css和js针对不同浏览器兼容的问题

    首先谈一下浏览器,虽然现在ie依然是浏览器市场的老大,大约占有67%的份额,但是由于其各方面的欠缺,用户开始选择其他浏览器作为自己浏览网页的主要 工具,比如firefox.theworld.maxth ...

  9. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

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

随机推荐

  1. RESTClient

    RESTClient是Mozilla Firefox一个用于测试http请求插件. 1.打开火狐扩展搜索RESTClient进行安装并重启浏览器. 2.重启后可以在Mozilla Firefox地址栏 ...

  2. ecplise最有用的8个快捷键

    1. ctrl+shift+r 打开资源 这组快捷键可以让你打开你工作区中的任何一个文件.而你只需要按下键盘的文件名或前几个字母 美中不足的是这组快捷键并非在所有视图下都能用. 2.ctrl+o:快速 ...

  3. 2018-02-03-jekyll框架下的post如何显示图片

    layout: post title: 2018-02-03-jekyll框架下的post如何显示图片 key: 20180203 tags: blog post modify_date: 2018- ...

  4. sed运用

    流编辑器sed sed简介 sed是stream editor的缩写,一种流编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(pattern ...

  5. rabbitmq的构架和原理（三）

    前面两篇博文已经将环境安装和相关配置介绍了,现在开始正式学习rabbitmq的使用了: rabbitMQ的构架 rabbitmq作为消息队列,一条消息从发布到订阅消费的完整流程为: 消息 --> ...

  6. 我的第一个Android开源库——CirclePointMove中文文档（可随Viewpager移动的指示器）

    Github网址:https://github.com/Stars-One/CirclePointMove 这个开源库一个封装好的Viewpager指示器,之前在学习的时候,想要实现一个小圆点跟随Vi ...

  7. Spring源码情操陶冶-自定义节点的解析

    本文承接前文Spring源码情操陶冶-DefaultBeanDefinitionDocumentReader#parseBeanDefinitions,特开辟出一块新地来啃啃这块有意思的骨头 自定义节 ...

  8. BZOJ 3309: DZY Loves Math [莫比乌斯反演 线性筛]

    题意:\(f(n)\)为n的质因子分解中的最大幂指数,求\(\sum_{i=1}^n \sum_{j=1}^m f(gcd(i,j))\) 套路推♂倒 \[ \sum_{D=1}^n \sum_{d| ...

  9. BZOJ 1758: [Wc2010]重建计划 [暂时放弃]

    今天晚上思维比较乱,以后再写写吧#include <iostream> #include <cstdio> #include <cstring> #include ...

  10. js小知识点

    1.setTimeout(function(num){ alert(num);},1000,123); 第三个参数为实参. 2.拼接字符串: document.body.innerHTML = '&l ...