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 ...
随机推荐
- 零基础实现node+express个性化聊天室
本篇文章使用node+express+jquery写一个个性化聊天室,一起来get一下~(源码地址见文章末尾) 效果图 项目结构 实现功能 登录检测 系统自动提示用户状态(进入/离开) 显示在线用户 ...
- dnion的remap.conf文件
# # URL Remapping Config File # # Using remap.config allows you to accomplish two things: # # 1) Rew ...
- C#常见问题总结(二)
1.erp系统可以在具有固定ip的拥有多层服务器的局域网中使用吗?如何使用 解决方法: 把ini.配置文件字符串中的服务器名改成服务器的,把debug文件夹拷到其他机器上就行,服务器上的服务器名是默认 ...
- 关于Java中equal 和 == 的区别
在对Java开发还不熟练的时候,往往很多人都喜欢用==去比较两个对象是否相等,有时候就会出现很奇葩的问题. 其实这类问题并不是奇葩问题,只是我们不够细心而已,在Java中“==”比较两个变量本身的值, ...
- 不使用Math.random实现随机数
不使用Math.random实现随机数 var rand = (function(){ var today = new Date(); var seed = today.getTime(); func ...
- 洛谷 [P1265] 公路修建
本题的描述:城市联盟,最短距离.. 使人想到了prim求MST,再一看数据范围:完全图!,那么一定得用prim,因为只有5000个点,所以不加优化的prim就能过. #include <iost ...
- HDU 3595 GG and MM [Every-SG]
传送门 题意: 两个数$x,y$,一个人的决策为让大数减去小数的任意倍数(结果不能为负),出现0的人胜 一堆这样的游戏同时玩 Every-SG 游戏规定,对于还没有结束的单一游戏,游戏者必须对该游戏进 ...
- jQuery源码研究——解决命名冲突
在项目中难免不去使用多个插件,如此一来这些插件就有可能出现一样的名称,当出现同名变量时后一个将会覆盖上一个,这样的话我们就无法同时使用多个插件了. 当遇到这种情况我们可以手动去修改插件源码把它的名字改 ...
- 如何解决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!= ...
- 二维码开源库ZBar-MDK STM32F429移植
前两篇文章已经实现ZBar在Windows平台下的编译和使用,本文将介绍如何把ZBar移植到STM32F429,IDE使用MDK. 1. MDK工程设置 (1)不勾选Use MicroLIB ,使用I ...