js判断当前设备和获取设备、浏览器宽高
/*** 判断当前设备* @returns*/
function currDevice(){//设备信息var u = navigator.userAgent;// appVersion 可返回浏览器的平台和版本信息。该属性是一个只读的字符串。var app = navigator.appVersion;//获取浏览器语言var browserLang = (navigator.browserLanguage || navigator.language).toLowerCase(); var deviceBrowser = function(){return{trident: u.includes('Trident') , //IE内核presto: u.includes('Presto') , //opera内核webKit: u.includes('AppleWebKit') , //苹果、谷歌内核gecko: u.includes('Gecko') && !u.includes('KHTML'), //火狐内核mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端ios: !!u.match(/\(i[^;]+;( U;)? CPU.Mac OS X/), //ios终端android: u.includes('Android') || u.includes('Linux'), //android终端或者uc浏览器iPhone: u.includes('iPhone'), //是否为iPhone或者QQHD浏览器iPad: u.includes('iPad'), //是否iPadwebApp: !u.includes('Safari'), //是否web应用程序,没有头部和底部weixin: u.includes('MicroMessenger'), //是否微信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属性指定的父坐标的计算顶端位置;
*/}
js判断当前设备和获取设备、浏览器宽高相关推荐
- jquery 判断是否是浮点数_jquery或者js获取到元素宽高精确到小数
首先我们应该知道用jQuery的width()方法获取元素的宽高及样式属性数值时,如果元素的属性是浮点数,会自动四舍五入成整数. 而如果我们就是想获取实际的带小数的属性数值时该用什么方法. 在使用获取 ...
- PHP判断pc和移动端跳转,JS判断是PC还是移动端浏览器,并根据不同的终端跳转到不同的网址...
JS判断是PC还是移动端浏览器,并根据不同的终端跳转到不同的网址 function browserRedirect() { var sUserAgent = navigator.userAgent.t ...
- 微信小程序获取图片的宽高,以及如何获取手机设备的宽高?
如何在微信小程序中获取图片的宽高 ? 首先拿到图片的路径,相对/绝对路径都行,其次通过 wx.getImageInfo 获取到图片的宽高 wx.getImageInfo({src,success: f ...
- 移动端js判断是app还是微信还是浏览器
移动端js判断是app还是微信还是浏览器 const ua = navigator.userAgent.toLowerCase();const isWeixin = ua.indexOf('micro ...
- 前端js获取图片大小 扩展名_前端 JS 获取 Image 图像 宽高 尺寸
前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...
- php 获取图片的宽高,JS怎么获取图片当前宽高
JS获取图片当前的宽高,我们可以使用JavaScript clientWidth和clientHeight属性来实现获取.clientWidth.clientHeight属性表示获取图像的当前宽度和高 ...
- php根据图片地址获取图片原始高宽,Js获取图片原始宽高的实现代码
如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...
- JS获取video真实宽高
JS获取video真实宽高 JS代码 var video = document.querySelector('video'); video.addEventListener('canplay', fu ...
- 【若依(ruoyi)】获取mainContent的宽高
前言 若依(ruoyi): v4.3 360极速浏览器 12.0.1550.0 (正式版本) (32 位) 操作系统 Windows 10 OS Version 2004 (Build 19041.5 ...
- 小程序项目实战总结--如何获取手机屏幕宽高?
一.获取手机屏幕宽高并存储 手机屏幕宽高一般是固定的,所以我们将它存在全局app.js中 我们通过wx.getSystemInfoSync()获取手机相关信息 // app.js App({// 定义 ...
最新文章
- 在博客园添加Lisp(或其它)代码高亮
- 第十六届全国大学生智能车竞赛文化衫LOGO主图案设计
- 新手入门深度学习 | 3-3:神经网络层Layers
- matlab编程选择语句,matlab编程控制语句
- 面试官:谈谈equals() 和 == 的区别
- RocketMQ简介及核心概念说明
- Tomcat开发Web项目基本结构
- Zing加快了JVM应用程序的预热
- 【渝粤教育】国家开放大学2018年春季 0314-21T兽医基础 参考试题
- 程序员哀叹:专科都是几十万的年薪,互联网的泡沫要破了
- jasperReport - 多Table的PDF中文导出
- 计算机专业考试系统,计算机基础考试系统
- JAVA中的getBytes方法
- Atitit mvc之道 attilax著 1. Atitti mvc的几大概念	2 1.1. Dispatcher Controller	2 1.2. 声明式渲染	2 1.3. 条件与循环
- exploit计算机术语,exploit
- Chromium浏览器历史版本下载
- Android仿QQ列表滑动
- 英语介词at、in、on常见用法(时间、地点、方位)
- javascript学习网站
- 移动硬盘坏了,自己搞定解决方案