如图:

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. Struts2中实现随机验证码

    一.创建RandomNum类 1: import java.awt.Color; 2: import java.awt.Font; 3: import java.awt.Graphics; 4: im ...

  2. python 编写简单的setup.py

    学习python也已经有一段时间了,发现python作为脚本语言一个很重要的特点就是简单易用,而且拥有巨多的第三方库,几乎方方面面的库都有,无论你处于哪个行业,想做什么工作,几乎都能找到对应的第三方库 ...

  3. css变量的用法——(--cssName)

    CSS变量,又称——CSS自定义属性,现在很多CSS预处理/后处理程序已作了相关快捷的编译处理, 基本用法有哪些呢,我们先看一个简单的栗子:——要求,创建一个五个块元素居中的分栏样式,奇数和偶数同高不 ...

  4. c# excel print 打印 将所有列调整为一页

    excel有时候列数比较多,行数也比较多,转换成xps文档的时候,一般是通过打印来实现. 由于打印的范围限制,所以会出现本来在一行的数据,由于列数比较多,溢出范围,被打印到两页了. 为解决这个问题,需 ...

  5. ContextLoaderListener加载过程

    在web.xml中,配置ContextLoaderListener <!-- 配置Listener,用来创建Spring容器 --> <listener> <listen ...

  6. SpringMVC源码情操陶冶-AbstractHandlerMethodMapping

    承接前文SpringMVC源码情操陶冶-AbstractHandlerMapping,本文将介绍如何注册HandlerMethod对象作为handler 类结构瞧一瞧 public abstract ...

  7. python+xlsxwriter+PIL自动压图贴图到Excel小工具

    一.环境 windows10/mac + python3.6 python第三方库 xlsxwriter.PIL.argparse 二.需求 1.运行每条测试case成功与否都需要把截图放在img文件 ...

  8. MySQL完全备份、增量备份与恢复[转]

    原文链接:http://www.360doc.com/content/11/1209/09/834950_170836197.shtml 场景:每周日执行一次完全备份,每天下午1点执行增量备份 [ 适 ...

  9. BZOJ 1502: [NOI2005]月下柠檬树 [辛普森积分 解析几何 圆]

    1502: [NOI2005]月下柠檬树 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1070  Solved: 596[Submit][Status] ...

  10. 静态成员static

    静态成员分为静态数据成员和静态函数成员: 静态数据成员: 1.用关键字static来声明: 2.该类的所有对象维护改成员的同一份拷贝:(就是说所有的对象看到的是同一份数据) 3.必须在类外定义和初始化 ...