获取浏览器和屏幕各种高度宽度
原生JS
document.body.clientWidth; //网页可见区域宽(body)document.body.clientHeight; //网页可见区域高(body)document.body.offsetWidth; //网页可见区域宽(body),包括border、margin等document.body.offsetHeight; //网页可见区域宽(body),包括border、margin等document.body.scrollWidth; //网页正文全文宽,包括有滚动条时的未见区域document.body.scrollHeight; //网页正文全文高,包括有滚动条时的未见区域document.body.scrollTop; //网页被卷去的Top(滚动条)document.body.scrollLeft; //网页被卷去的Left(滚动条)window.screenTop; //浏览器距离Topwindow.screenLeft; //浏览器距离Leftwindow.screen.height; //屏幕分辨率的高window.screen.width; //屏幕分辨率的宽window.screen.availHeight; //屏幕可用工作区的高window.screen.availWidth; //屏幕可用工作区的宽
Jquery
$(window).height(); //浏览器当前窗口可视区域高度$(document).height(); //浏览器当前窗口文档的高度$(document.body).height(); //浏览器当前窗口文档body的高度$(document.body).outerHeight(true); //浏览器当前窗口文档body的总高度 包括border padding margin$(window).width(); //浏览器当前窗口可视区域宽度$(document).width(); //浏览器当前窗口文档对象宽度$(document.body).width(); //浏览器当前窗口文档body的宽度$(document.body).outerWidth(true); //浏览器当前窗口文档body的总宽度 包括border padding margin
PC端
按屏幕宽度大小排序(主流的用橙色标明)分辨率 比例 | 设备尺寸1024*500 (8.9寸)1024*768 (比例4:3 | 10.4寸、12.1寸、14.1寸、15寸; )1280*800(16:10 |15.4寸)1280*1024(比例:5:4 | 14.1寸、15.0寸)1280*854(比例:15:10 | 15.2)1366*768 (比例:16:9 | 不常见)1440*900 (16:10 17寸 仅苹果用)1440*1050(比例:5:4 | 14.1寸、15.0寸)1600*1024(14:9 不常见)1600*1200 (4:3 | 15、16.1)1680*1050(16:10 | 15.4寸、20.0寸)1920*1200 (23寸)
通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 PC端响应式媒体断点
@media (min-width: 1024px){body{font-size: 18px} /*>=1024的设备*/} @media (min-width: 1100px) {body{font-size: 20px} /*>=1100的设备*/} @media (min-width: 1280px) {body{font-size: 22px;} /*>=1280的设备*/} @media (min-width: 1366px) {body{font-size: 24px;}} @media (min-width: 1440px) {body{font-size: 25px;}} @media (min-width: 1680px) {body{font-size: 28px;}} @media (min-width: 1920px) {body{font-size: 33px;}}
获取浏览器和屏幕各种高度宽度相关推荐
- Javascript、Jquery获取浏览器和屏幕各种高度宽度[mark]
Javascript: IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高 ...
- Javascript、Jquery获取浏览器和屏幕各种高度宽度
Javascript:alert(document.body.clientWidth); //网页可见区域宽(body) alert(document.body.clientHeight); //网页 ...
- JS 获取浏览器、显示器 窗体等宽度和高度
转载自 JS 获取浏览器.显示器 窗体等宽度和高度 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见 ...
- [js] 获取浏览器当前页面的滚动条高度的兼容写法
[js] 获取浏览器当前页面的滚动条高度的兼容写法 document.documentElement.scrollTop || document.body.scrollTop; 个人简介 我是歌谣,欢 ...
- HTML 获取屏幕、浏览器、页面的高度宽度
目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可用以及任务栏的高度和宽度. 3. 浏览器信息:介绍浏览器尺寸信 ...
- js获取浏览器当前屏幕的宽度和高度
1.获取HTML元素 document.documentElement 2.获取body元素 document.body 3.兼容所有浏览器获取当前屏幕的宽度. var winWidth = docu ...
- JQuery获取当前屏幕的高度宽度
JQuery获取浏览器窗口宽高,文档宽高 2010-01-20 08:59 <script type="text/javascript"> $(document).re ...
- 获取页面、屏幕、div宽度
使用原生方法 1 document.getElementById("d1").style.width; 这种只能获取到行内内联样式,也就是 1 <div id="d ...
- js获取浏览器和屏幕宽高等信息(转)
虽然这些东西msdn 中都可以找到,但是为了方便查询,还是把网友的总结放了上来: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.c ...
最新文章
- python 函数调用列表,函数调用列表的Python oneliner
- sqlserver获取当月、年的第一天和最后一天
- Chrome_调试js出现Uncaught SyntaxError: Unexpected identifier
- SpringBoot中使用 Druid 数据库连接池, 后台SQL监控无效
- softmax简单模型处理Mnist分类问题
- MFC 双击控件 提示重载函数已存在
- 爱上MVC3系列~RenderAction与RenderPartial及一个页面多个表单提交
- C# 创建单例你会几种方式?
- 【中间件技术】第一部分 概述(1) 软件构件与中间件基本概念
- LabVIEW编程LabVIEW开发在LabVIEW中复用现有代码
- MySQL8.0零基础入门
- Arp中间人攻击原理
- CRMEB商城直播功能-微信小程序直播
- php表格中的caption,html中caption标签的使用方法及实例详解
- oracle 磁带备份,磁带备份 - Linux下实现自动备份Oracle数据库_数据库技术_Linux公社-Linux系统门户网站...
- JS方式实现隐藏手机号码中间4位数
- 卸载 Navicat!正版 MySQL 可视化管理工具,功能真心强大!
- 【Python】pandas的describe参数详解
- LeetCode——桶的思想
- 数字电路3-8译码器