js获取浏览器的缩放状态,浏览器右上角的百分比缩放后的状态
首先说明,这里所说的浏览器状态是指用户点击浏览器左上角的放大加号/减号所产生的页面整体变大变小的情况(快捷键:Ctrl+加号或 Ctrl+减号 或 Ctrl+滚轮上下)
实现代码如下:
detectZoom 函数的返回值如果是 100 就是默认缩放级别,大于 100 则是放大了,小于 100 则是缩小了。
function detectZoom (){
var ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
}
else if (~ua.indexOf('msie')) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
}
else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
ratio = window.outerWidth / window.innerWidth;
} if (ratio){
ratio = Math.round(ratio * 100);
} return ratio;
};
var ratio = detectZoom () // 打印当前缩放值
console.log(ratio) // 判断是否缩放 if(ratio > 100){
console.log("放大啦")
}else if(ratio < 100){
console.log("缩小了")
}else{
console.log("100%")
}
js获取浏览器的缩放状态,浏览器右上角的百分比缩放后的状态的更多相关文章
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...
- 使用原生js 获取用户访问项目的浏览器类型
想要获取浏览器的类型很简单,网上提供了很多方法,但是看过之后,都是根据浏览器内核来判断是ie,谷歌,火狐,opeara的, 所以不能进一步判断在国内使用的主流浏览器类型,比如360,百度,搜狐浏览器等 ...
- (效果五)js获取客户端ip地址及浏览器信息
在前端开发的时候,有时候为了测试需要得到访问客户的ip地址.虽说是后端来做的,但是我们前端也可以完成. 先说下获取用户ip地址,包括像ipv4,ipv6,掩码等内容,但是大部分都要根据浏览器的支持情况 ...
- js获取页面元素位置函数(跨浏览器)
function getElementPos(elementId) { var ua = navigator.userAgent.toLowerCase(); var isOpera = (ua.in ...
- JS获取表单元素的value
<!-- 1.option selected属性,如果我们在下拉列表里面选择了一个option那么他的selected="true" ,如果我们想设置当前的option是选中 ...
- JS 获取form表单的所有数据
在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为 ...
- js获取浏览器类型和版本信息
bro () { let broName = 'Runing' let strStart = 0 let strStop = 0 let temp = '' let userAgent = windo ...
- js获取浏览器信息及版本(兼容IE)
获取浏览器信息方法有很多种,但是要是兼容ie旧版本就有点麻烦了,因为很多方法在旧版本ie是不支持的,所以ie我做了单独处理,但是目前还有小问题,就是想显示QQ浏览器,搜狗浏览器..这样的,这样还实现不 ...
- 【转】javascript浏览器参数的操作,js获取浏览器参数
原文地址:http://www.haorooms.com/post/js_url_canshu html5修改浏览器地址:http://www.cnblogs.com/JiangXiaoTian/ar ...
随机推荐
- Spring-Data-Redis 入门学习
Spring-Data-Redis 入门学习 参考文章: https://www.jianshu.com/p/4a9c2fec1079 导入 redis 相关依赖 <dependency> ...
- 五个goland进行go开发的小技巧
五个goland进行go开发的小技巧 本文译自5 Tips To Speed Up Golang Development With IntelliJ Or Goland 确实很实用. 1. 实现int ...
- Andriod Studio安装及使用
创建Andriod项目 1.下载最新版的Andriod studio 2.在 Welcome to Android Studio 窗口中,点击 Start a new Android Studio p ...
- A 题解————2019.10.16
[题目描述] 对于给定的一个正整数n, 判断n是否能分成若干个正整数之和 (可以重复) ,其中每个正整数都能表示成两个质数乘积. [输入描述]第一行一个正整数 q,表示询问组数.接下来 q 行,每行一 ...
- python3 mqtt 客户端以及服务端
pip3 install paho-mqtt client #!/usr/bin/env python #coding=utf- import json import sys import os im ...
- 使用helm管理复杂kubernetes应用
1. 查看仓库: $ helm repo list NAME URL stable https://aliacs-app-catalog.oss-cn-hangzhou.aliyuncs.com/ch ...
- Swagger2.9.2进入API界面报NumberFormatException异常
[转载请注明]: 原文出处:https://www.cnblogs.com/jstarseven/p/11778377.html 作者:jstarseven 码字挺辛苦的..... ...
- 【神经网络与深度学习】生成式对抗网络GAN研究进展(五)——Deep Convolutional Generative Adversarial Nerworks,DCGAN
[前言] 本文首先介绍生成式模型,然后着重梳理生成式模型(Generative Models)中生成对抗网络(Generative Adversarial Network)的研究与发展.作者 ...
- mapreduce 函数入门 一
MapReduce 程序的业务编码分为两个大部分,一部分配置程序的运行信息,一部分 编写该 MapReduce 程序的业务逻辑,并且业务逻辑的 map 阶段和 reduce 阶段的代码分别继 承 Ma ...
- AntDesign vue学习笔记(二)axios使用
之前在vue页面中引入axios使用,本篇在mainjs中引入,这样就不用单独在每个页面引入 1.mainjs中引入axios,设置基础url import axios from 'axios' ax ...