如图：

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. css中 padding属性的数值赋予顺序为

    4种可能的情况,举例说明:padding:10px; 四个内边距都是10pxpadding:5px 10px; 上下5px 左右10pxpadding:5px 10px 15px; 上5px 右10p ...

  2. Python笔记（七）：字典、类、属性、对象实例、继承

    (一)  简单说明 字典是Python的内置数据结构,将数据与键关联(例如:姓名:张三,姓名是键,张三就是数据).例如:下面这个就是一个字典 {'姓名': '张三', '出生日期': '2899-08 ...

  3. 02_HTML5+CSS详解第一天

    视频来源:麦子学院 讲师:朱朝兵 HTML5概念:HTML即超文本标记语言(HyperText Makeup Language),是一种语法简单,结构清晰的解释型文档,不同于其他编程语言. HTML5 ...

  4. 在nagios中使用nrpe自定义脚本

    nrpe的安装    tar xvfz nrpe-2.13.tar.gz cd nrpe-2.13 ./configure make all make install-plugin make inst ...

  5. Spring事务不回滚原因分析

    Synchronized用于线程间的数据共享,而ThreadLocal则用于线程间的数据隔离. 在我完成一个项目的时候,遇到了一个Spring事务不回滚的问题,通过aspectJ和@Transacti ...

  6. 安装puppeteer

    Puppeteer是一个node库,他提供了一组用来操纵Chrome的API,默认headless也就是无UI的chrome,也可以配置为有UI. 其实有点类似于PhantomJS,但Puppetee ...

  7. Effective Java 之-----关于延迟初始化

    1.大多数情况下,正常的初始化要优先于延迟初始化. private final FieldType field = computeFieldValue(); 2.如果利用延迟优化来破坏初始化的循环,就 ...

  8. windows系统下安装Eclipse for PHP

    第一步: 如果机器上没有java运行环境,请先安装   第二步: 下载eclipse,下载地址: http://www.eclipse.org/downloads/ 选择对应版本,本人选择的是64位版 ...

  9. IIS 加载 JSON 错误 404 解决办法

    MIME设置:在IIS的站点属性的HTTP头设置里,选MIME 映射中点击”文件类型”-”新类型”,添加一个文件类型:关联扩展名:*.json内容类型(MIME):application/x-java ...

  10. elk5.4小白踩坑记录

    搭建请参考:http://www.ywnds.com/?p=9776 搭建步骤:http://www.ywnds.com/?p=9776 初步解方案:先不用管这个提示,当你创建完索引后,接受数据后.一 ...