javaSript 处理电脑和浏览器pc端缩放对页面的影响
由于用户的个人习惯或其他原因,可能会调整到电脑上的缩放比例或者浏览器的缩放比例,如果访问页面会看起来比较不好看,
电脑上的缩放:

浏览器上的缩放:

解决方法:
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;
};
window.onload = window.onresize = function () {
if(detectZoom() > 100){ //当前电脑/浏览器缩放大于100%, 按等比缩小; 当电脑和浏览器都存在缩放,值会累计加在一起的;
document.body.style.zoom = (125/detectZoom()).toFixed(2);
}else{
document.body.style.zoom = 1;
}
};
javaSript 处理电脑和浏览器pc端缩放对页面的影响的更多相关文章
- 微信环境支付宝服务窗环境app手机浏览器pc端混合判断
//微信环境 if(userAgent.match(/micromessenger/) == 'micromessenger'){ }//支付宝服务窗环境else if(userAgent.match ...
- 前端:微信支付和支付宝支付在pc端和h5页面中的应用
1:h5微信支付 使用的是https://pay.weixin.qq.com/wiki/doc/api/index.html 中的 (1):公司需要首先要配置公众号微信支付地址和测试白名单(支付的时 ...
- 【平板电脑模拟器】PC端-Chrome自带的功能
直接说使用方式吧, 启动方法:打开Chrome浏览器--〉F12--〉右下角的齿轮按钮(Settings)--〉选择"Overrides" 然后在"Overrides&q ...
- 电脑分辨率与pc端页面布局
在电脑设置中选择:控制面板->外观和个性化->显示 可以设置页面的显示比例,原因是在1920*1080的分辨率下页面的图标就会变得比较小,方便用户看,这个功能就是把页面内容变大(默认是中等 ...
- Fiddler4工具配置及调试手机和PC端浏览器
Fiddler最大的用处: 模拟请求.修改请求.手机应用调试 Fiddler最新版本 下载地址: http://www.telerik.com/download/fiddler Fiddler 想要监 ...
- 让访问pc端的官网直接跳转到移动端的网站代码
<SCRIPT LANGUAGE="JavaScript"> function mobile_device_detect(url) { var thisOS=navig ...
- 移动端页面a input去除点击效果及pc端切换
1 手机端页面a button input去除点击效果以及闪屏问题 添加: a, button, input { -webkit-tap-highlight-color: rgba(255, 0, 0 ...
- 限制页面被pc端访问
在需要被pc端访问的页面的脚本里加上如下代码即可: <script>var system = {}; var p = navigator.platform; var u = navigat ...
- 阻止pc端浏览器缩放js代码
阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...
随机推荐
- kali渗透综合靶机(三)--bulldog2靶机
kali渗透综合靶机(三)--bulldog2靶机 靶机地址:https://download.vulnhub.com/bulldog/Bulldog2.ova 一.主机发现 1.netdiscove ...
- Vertx和Jersey集成使用
为了更好地解耦和提高性能,一般将工程的接口部分剥离出来形成一个单独的工程,这样不仅能提高性能,增强可维护性,并且在后台工程宕掉的话对客户端接口的影响较小. 公司使用了Vertx和Jersey,Vert ...
- ef linq多表查询(三表)
var ph = (from c in reef.CQICC_CLIENT join v in reef.CQICC_VISIT_CLIENT on c.CLIENT_T_ID equals v.CL ...
- Javaweb常用解决问题连接
1.javaweb的idea如何创建及配置web项目 https://www.jianshu.com/p/8d49d36a3c7e 2.servlet的建立以及部署 https://blog.csdn ...
- LinuxShell——正则表达式
LinuxShell——正则表达式 摘要:本文主要学习了Shell中的正则表达式. 简介 含义 正则表达式,也称作正规表示法,是用于描述字符排列和匹配模式的一种语法规则,它主要用于字符串的模式分割.匹 ...
- mask-rcnn代码解读(四):rpn_feature_maps数据的处理
此处模拟 rpn_feature_maps数据的处理,最终得到rpn_class_logits, rpn_class, rpn_bbox. 代码如下: import numpy as np'''层与层 ...
- 手写instanceof (详解原型链) 和 实现绑定解绑和派发的事件类
A instanceof B 是判断 A 是否继承自B,是返回true, 否返回false 再精确点就是判断B 是否 再 A 的 原型链上, 什么是原型链,举个例子: 我们定 ...
- Python环境安装与基础语法(2)——数据类型、标识符、语言分类
高级语言发展 结构化语言:以顺序(步骤化),分支,循环描述问题 面向对象语言:接近人类的认知,万物抽象成对象,对象间的关系抽象成类和继承 程序=数据结果+算法 Python解释器 CPython:由C ...
- Python语言基础06-字符串和常用数据结构
本文收录在Python从入门到精通系列文章系列 1. 使用字符串 第二次世界大战促使了现代电子计算机的诞生,最初计算机被应用于导弹弹道的计算,而在计算机诞生后的很多年时间里,计算机处理的信息基本上都是 ...
- 通过premake生成vs工程文件
visual studio的工程视图,在引用外部目录时非常麻烦,这时候可以使用premake一键生成工程文件,自动配置好工程的各种属性,还有目录的组织结构. 示例:如下是一个c++的外部目录结构,我们 ...