如图:

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. 零基础实现node+express个性化聊天室

    本篇文章使用node+express+jquery写一个个性化聊天室,一起来get一下~(源码地址见文章末尾) 效果图 项目结构 实现功能 登录检测 系统自动提示用户状态(进入/离开) 显示在线用户 ...

  2. dnion的remap.conf文件

    # # URL Remapping Config File # # Using remap.config allows you to accomplish two things: # # 1) Rew ...

  3. C#常见问题总结(二)

    1.erp系统可以在具有固定ip的拥有多层服务器的局域网中使用吗?如何使用 解决方法: 把ini.配置文件字符串中的服务器名改成服务器的,把debug文件夹拷到其他机器上就行,服务器上的服务器名是默认 ...

  4. 关于Java中equal 和 == 的区别

    在对Java开发还不熟练的时候,往往很多人都喜欢用==去比较两个对象是否相等,有时候就会出现很奇葩的问题. 其实这类问题并不是奇葩问题,只是我们不够细心而已,在Java中“==”比较两个变量本身的值, ...

  5. 不使用Math.random实现随机数

    不使用Math.random实现随机数 var rand = (function(){ var today = new Date(); var seed = today.getTime(); func ...

  6. 洛谷 [P1265] 公路修建

    本题的描述:城市联盟,最短距离.. 使人想到了prim求MST,再一看数据范围:完全图!,那么一定得用prim,因为只有5000个点,所以不加优化的prim就能过. #include <iost ...

  7. HDU 3595 GG and MM [Every-SG]

    传送门 题意: 两个数$x,y$,一个人的决策为让大数减去小数的任意倍数(结果不能为负),出现0的人胜 一堆这样的游戏同时玩 Every-SG 游戏规定,对于还没有结束的单一游戏,游戏者必须对该游戏进 ...

  8. jQuery源码研究——解决命名冲突

    在项目中难免不去使用多个插件,如此一来这些插件就有可能出现一样的名称,当出现同名变量时后一个将会覆盖上一个,这样的话我们就无法同时使用多个插件了. 当遇到这种情况我们可以手动去修改插件源码把它的名字改 ...

  9. 如何解决JavaScript中0.1+0.2不等于0.3

    console.log(0.1+0.2===0.3)// true or false?? 在正常的数学逻辑思维中,0.1+0.2=0.3这个逻辑是正确的,但是在JavaScript中0.1+0.2!= ...

  10. 二维码开源库ZBar-MDK STM32F429移植

    前两篇文章已经实现ZBar在Windows平台下的编译和使用,本文将介绍如何把ZBar移植到STM32F429,IDE使用MDK. 1. MDK工程设置 (1)不勾选Use MicroLIB ,使用I ...