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

电脑上的缩放:

浏览器上的缩放:

解决方法

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端缩放对页面的影响的更多相关文章

  1. 微信环境支付宝服务窗环境app手机浏览器pc端混合判断

    //微信环境 if(userAgent.match(/micromessenger/) == 'micromessenger'){ }//支付宝服务窗环境else if(userAgent.match ...

  2. 前端:微信支付和支付宝支付在pc端和h5页面中的应用

    1:h5微信支付 使用的是https://pay.weixin.qq.com/wiki/doc/api/index.html  中的 (1):公司需要首先要配置公众号微信支付地址和测试白名单(支付的时 ...

  3. 【平板电脑模拟器】PC端-Chrome自带的功能

    直接说使用方式吧, 启动方法:打开Chrome浏览器--〉F12--〉右下角的齿轮按钮(Settings)--〉选择"Overrides" 然后在"Overrides&q ...

  4. 电脑分辨率与pc端页面布局

    在电脑设置中选择:控制面板->外观和个性化->显示 可以设置页面的显示比例,原因是在1920*1080的分辨率下页面的图标就会变得比较小,方便用户看,这个功能就是把页面内容变大(默认是中等 ...

  5. Fiddler4工具配置及调试手机和PC端浏览器

    Fiddler最大的用处: 模拟请求.修改请求.手机应用调试 Fiddler最新版本 下载地址: http://www.telerik.com/download/fiddler Fiddler 想要监 ...

  6. 让访问pc端的官网直接跳转到移动端的网站代码

    <SCRIPT LANGUAGE="JavaScript"> function mobile_device_detect(url) { var thisOS=navig ...

  7. 移动端页面a input去除点击效果及pc端切换

    1 手机端页面a button input去除点击效果以及闪屏问题 添加: a, button, input { -webkit-tap-highlight-color: rgba(255, 0, 0 ...

  8. 限制页面被pc端访问

    在需要被pc端访问的页面的脚本里加上如下代码即可: <script>var system = {}; var p = navigator.platform; var u = navigat ...

  9. 阻止pc端浏览器缩放js代码

    阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...

随机推荐

  1. git使用cherry-pick和revert抢救错误代码提交

    大多数的新手在新接触git时都会出现这样的问题.代码写完了,提交到dev分支进行测试.一高兴忘记切回来,继续在dev分支开发,写完之后提交时猛的发现,我靠,我怎么在dev上面写代码,此时内心必然是一阵 ...

  2. kubernetes 之一些报错

    1.kubelet与docker的Cgroup Driver不一致导致的报错 7月 :: kubeadm-master kubelet[]: W0701 :: watcher.go:] Error w ...

  3. centos6 cgroup及cgred简介和简单使用

    一.cgroup简介 Linux CGroup全称Linux Control Group, 是Linux内核的一个功能,用来限制,控制与分离一个进程组群的资源(如CPU.内存.磁盘输入输出等).这个项 ...

  4. Zabbix设置自定义监控项之——监控tcp连接状态

    目录 一.用户自定义参数 二.配置 监控 TCP 连接状态 在实际监控中,除了官方自带的一些监控项,我们很多时候有一些定制化监控,比如特定的服务.TCP 连接状态等等,这时候就需要自定义监控项.自定义 ...

  5. 使用AvalonEdit实现WPF的Lua编辑器

    原文发布于:https://www.chenxublog.com/2019/07/14/use-avalonedit-make-wpf-lua-editor.html 由于LLCOM里面内置了Lua代 ...

  6. 安装使用 superset

    安装 superset 创建虚拟环境: python -m venv msuperset 激活虚拟环境: cd msuperset source bin/activate 安装 superset pi ...

  7. Java学习——枚举类

    Java学习——枚举类 摘要:本文主要介绍了Java的枚举类. 部分内容来自以下博客: https://www.cnblogs.com/sister/p/4700702.html https://bl ...

  8. WinRAR命令行版本 rar.exe使用详解(适用Linux)

    RAR 命令行语法: RAR.exe <命令> [ -<开关> ] <压缩文件> [ <@列表文件...> ] [ <文件...> ] [ ...

  9. 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法

    最近做项目时,要用到扫一扫二维码的功能,在html5+里面有提供barcode功能,于是照过来用了, 写的代码如下 : 扫码页面: <style lang="less" sc ...

  10. 章节十一、6-操作集合里面的Web元素

    以下演示操作以该网站为例:https://learn.letskodeit.com/p/practice 一.如何操作多个元素(把多个元素放到集合容器中然后操作它们) 列如我们需要操作这些单选框:: ...