js判断当前设备及获取设备、浏览器的宽度和高度

在开发的时候，我们常常需要根据用户当前设备进行相应设置和显示，在此展示一个简单的方法判断（这个方法忘了是从哪里看来了的~），希望对你有帮助哦~

/*** 判断当前设备* @returns*/
function currDevice(){var u = navigator.userAgent;var app = navigator.appVersion;// appVersion 可返回浏览器的平台和版本信息。该属性是一个只读的字符串。var browserLang = (navigator.browserLanguage || navigator.language).toLowerCase();    //获取浏览器语言var deviceBrowser = function(){return{trident: u.indexOf('Trident') > -1,  //IE内核presto: u.indexOf('Presto') > -1,  //opera内核webKit: u.indexOf('AppleWebKit') > -1,  //苹果、谷歌内核gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,  //火狐内核mobile: !!u.match(/AppleWebKit.*Mobile.*/),  //是否为移动终端ios: !!u.match(/\(i[^;]+;( U;)? CPU.Mac OS X/),  //ios终端android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,  //android终端或者uc浏览器iPhone: u.indexOf('iPhone') > -1,  //是否为iPhone或者QQHD浏览器iPad: u.indexOf('iPad') > -1,  //是否iPadwebApp: u.indexOf('Safari') == -1,  //是否web应用程序，没有头部和底部weixin: u.indexOf('MicroMessenger') > -1,  //是否微信qq: u.match(/\sQQ/i) == " qq",  //是否QQ}}();console.log(deviceBrowser);}

下面来看一下设备、浏览器的宽度和高度的获取吧：

/*** 获取设备、浏览器的宽度和高度* @returns*/
function deviceBrowserWH(){//获取浏览器窗口的内部宽高 - IE9+、chrome、firefox、Opera、Safari：var w = window.innerWidth;var h = window.innerHeight;// HTML文档所在窗口的当前宽高 - IE8.7.6.5document.documentElement.clientWidth;document.documentElement.clientHeight;document.body.clientWidth;document.body.clientHeight;var screenW = window.screen.width;//设备的宽度var screenH = document.body.clientHeight;//网页可见区域宽高，不包括工具栏和滚动条（浏览器窗口可视区域大小）var webpageVisibleW = document.documentElement.clientWidth || document.body.clientWidth;var webpageVisibleH = document.documentElement.clientHeight || document.body.clientHeight;//网页正文全文宽高(不包括滚动条)var webpageW = document.documentElement.scrollWidth || document.body.scrollWidth;var webpageH = document.documentElement.scrollHeight || document.body.scrollHeight;//网页可见区域宽高，包括滚动条等边线（会随窗口的显示大小改变）var webpageVisibleW2 = document.documentElement.offsetWidth || document.body.offsetWidth ;var webpageVisibleH2 = document.documentElement.offsetHeight || document.body.offsetHeight ;console.log(w+'*'+h);console.log(screenW+'*'+screenH);console.log(webpageVisibleW+'*'+webpageVisibleH);console.log(webpageW+'*'+webpageH);console.log(webpageVisibleW2+'*'+webpageVisibleH2);//网页卷去的距离与偏移量/*1.scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离；2.scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离；3.offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置；4.offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置；
*/}

这里主要是整理一些相关知识...

浏览器窗口改变大小事件：

/*** 浏览器窗口改变大小事件* @returns*/
function browserResize(){window.onresize = function(){}
}

js判断当前设备及获取设备、浏览器的宽度和高度相关推荐

js判断当前设备和获取设备、浏览器宽高
/*** 判断当前设备* @returns*/ function currDevice(){//设备信息var u = navigator.userAgent;// appVersion 可返回浏览器 ...
PHP判断pc和移动端跳转,JS判断是PC还是移动端浏览器，并根据不同的终端跳转到不同的网址...
JS判断是PC还是移动端浏览器,并根据不同的终端跳转到不同的网址 function browserRedirect() { var sUserAgent = navigator.userAgent.t ...
移动端js判断是app还是微信还是浏览器
移动端js判断是app还是微信还是浏览器 const ua = navigator.userAgent.toLowerCase();const isWeixin = ua.indexOf('micro ...
JS获取各种屏幕的宽度和高度
JS获取各种屏幕的宽度和高度描述用法网页可见区域宽 document.body.clientWidth 网页可见区域高 document.body.clientHeight 网页可见区域宽 do ...
php 图片获得大小,PHP获取一张图片的宽度和高度大小并裁切图片
时间:2018-11-04 概述:图片剪切这个PHP技巧主要测试PHP对图片的处理能力,打开一张图片,并获取这张图片的宽度和高度是多少,另外尝试将一张图片裁切: $sourceImage = &qu ...
javascript获取屏幕的可用宽度和高度
说明获取屏幕的可用宽度和高度示例 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
设置浏览器滚动条宽度、高度
/*webkit内核*/ .ui-jqgrid-bdiv::-webkit-scrollbar {width:1px; height:2px; } .ui-jqgrid-bdiv::-webkit-s ...
PHP和js判断访问终端是否是微信浏览器手机还是电脑
2019独角兽企业重金招聘Python工程师标准>>> js判断是否是微信浏览器 function is_weixin() { var ua = window.navigator.u ...
Android在OnCreate中获取控件的宽度和高度
在Android中,有时需要对控件进行测量,得到的控件宽度和高度可以用来做一些计算.在需要自适应屏幕的情况下,这种计算就显得特别重要.另一方便,由于需求的原因,希望一进入界面后,就能得到控件的宽度和高 ...

js判断当前设备及获取设备、浏览器的宽度和高度

js判断当前设备及获取设备、浏览器的宽度和高度相关推荐

最新文章

热门文章