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= ...
随机推荐
- Jvisualvm简单使用教程
本博客介绍一下jvisualvm的简单使用教程,jvisualvm功能还是挺多的,不过本博客之简单介绍一下 1.拿线程快照信息 在jdk安装目录找到jvisualvm.exe,${JDK_HOME}\ ...
- python asyncio 获取协程返回值和使用callback
1. 获取协程返回值,实质就是future中的task import asyncioimport timeasync def get_html(url): print("start get ...
- sql server 下载安装标记
SQL Server 2017 的各版本和支持的功能 https://docs.microsoft.com/zh-cn/sql/sql-server/editions-and-components-o ...
- 线程池之ScheduledThreadPoolExecutor线程池源码分析笔记
1.ScheduledThreadPoolExecutor 整体结构剖析. 1.1类图介绍 根据上面类图图可以看到Executor其实是一个工具类,里面提供了好多静态方法,根据用户选择返回不同的线程池 ...
- Python - 标准库概况 - 第二十一天
Python 标准库概览 操作系统接口 os模块提供了不少与操作系统相关联的函数. 建议使用 "import os" 风格而非 "from os import *&quo ...
- 初识Android App自动化测试框架--Unittest
1.为什么需要使用框架实现自动化测试 作为测试工程师,可能在代码能力上相比开发工程师要弱一点,所以我们在写脚本的时候就会相对容易的碰到更多的问题,如果有一个成熟的框架供给我们使用的话,可以帮助我们避免 ...
- 关于javascript,多种函数封装!!
1.获取最终的属性 function getStyleAttr(obj, attr){ if(window.getComputedStyle){ return window.getComputedSt ...
- Delphi2007 在Win10 下运行报错 Assertion failure
Delphi2007 原来安装在Win7 下 运行正常, 自从升级到Win10 ,新建工程运行然后关闭报错, 报错信息如下: ---------------------------bds.exe - ...
- Linux出现You have new mail in /var/spool/mail/root提示,关闭邮件提示清理内容的解决方案
Linux出现You have new mail in /var/spool/mail/root提示,关闭邮件提示的解决方案 有的时候敲一下回车,就出来You have new mail in /va ...
- SAP S4HANA BP事务代码初始界面的ROLE和Grouping配置
SAP S4HANA BP事务代码初始界面的ROLE和Grouping配置 SAP S/4 HANA系统里,创建供应商不再使用MK01/FK01/XK01等事务代码,而是使用BP事务代码. BP事务代 ...