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= ...
随机推荐
- 移动端js触摸touch详解(附带案例源码)
移动端触摸滑动原理详解案例,实现过程通过添加DOM标签的触摸事件监听,并计算触摸距离,通过距离坐标计算触摸角度,最后通过触摸角度去判断往哪个方向触摸的. 触摸的事件列表 触摸的4个事件: touchs ...
- 基于OceanStor Dorado V3存储之数据保护 Hyper 特性
基于OceanStor Dorado V3存储之数据保护 Hyper 特性 1.1 快照 1.2 HyperCDP 1.3 HyperCopy 1.4 克隆(HyperClone) 1.5 ...
- web api 记录部署IIS获取服务器地址的类型
获取服务器地址类型分多种,以下记录 1.HttpContext.Current.Server.MapPath("~/File") 返回的值为 D:\3Project\Code\Mo ...
- NumPy 文件数据读写
写数据 NumPy 数组可以使用 np.save 方法保存到本地磁盘中,默认扩展名是 .npy,并且是未压缩的二进制格式. import numpy as np a = np.array([[0, 1 ...
- git和小乌龟在windows下安装
一:所需软件 (1):git 下载地址:https://git-scm.com/download (2):TortoiseGit 下载地址:https://tortoisegit.org/downlo ...
- mask-rcnn代码解读(六):resize_image()函数的解析
我已经根据resize_image()函数的解析对原图像与resize图像进行了解析, 若有读者想对原图像与目标图像不同尺寸验证,可根据以下代码,调整函数参数, 其细节如下: import cv2 a ...
- apache-tomcat-7.0.94在Windows上启动时,控制台黑窗口出现乱码解决
一.问题 二.解决 原因是tomcat日志编码的配置问题. 打开tomcat/conf/logging.properties配置文件. 把编码注释掉或者改为gbk就可以了. 参考:https://bl ...
- 解决 bash: vue command not found
背景 : win10 使用 yarn 全局 安装 vue/cli 后 yarn global add @vue/cli 提示安装成功 使用vue create 提示 bash: ...
- Git 合并单个文件
有两个分支 # git branch -a * branchA branchB remotes/origin/branchC A分支合并B分支单个文件 注意是本地分支,还是远程分支 # git che ...
- Mac下安装npm全局包提示权限不够
Mac OS下安装npm的全局包,总是出现如下提示Missing write access,需要提升权限才能继续. npm WARN checkPermissions Missing write ac ...