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

电脑上的缩放:

浏览器上的缩放:

解决方法

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. kali渗透综合靶机(三)--bulldog2靶机

    kali渗透综合靶机(三)--bulldog2靶机 靶机地址:https://download.vulnhub.com/bulldog/Bulldog2.ova 一.主机发现 1.netdiscove ...

  2. Vertx和Jersey集成使用

    为了更好地解耦和提高性能,一般将工程的接口部分剥离出来形成一个单独的工程,这样不仅能提高性能,增强可维护性,并且在后台工程宕掉的话对客户端接口的影响较小. 公司使用了Vertx和Jersey,Vert ...

  3. 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 ...

  4. Javaweb常用解决问题连接

    1.javaweb的idea如何创建及配置web项目 https://www.jianshu.com/p/8d49d36a3c7e 2.servlet的建立以及部署 https://blog.csdn ...

  5. LinuxShell——正则表达式

    LinuxShell——正则表达式 摘要:本文主要学习了Shell中的正则表达式. 简介 含义 正则表达式,也称作正规表示法,是用于描述字符排列和匹配模式的一种语法规则,它主要用于字符串的模式分割.匹 ...

  6. mask-rcnn代码解读(四):rpn_feature_maps数据的处理

    此处模拟 rpn_feature_maps数据的处理,最终得到rpn_class_logits, rpn_class, rpn_bbox. 代码如下: import numpy as np'''层与层 ...

  7. 手写instanceof (详解原型链) 和 实现绑定解绑和派发的事件类

    A  instanceof  B    是判断  A  是否继承自B,是返回true,  否返回false 再精确点就是判断B   是否  再  A  的 原型链上, 什么是原型链,举个例子: 我们定 ...

  8. Python环境安装与基础语法(2)——数据类型、标识符、语言分类

    高级语言发展 结构化语言:以顺序(步骤化),分支,循环描述问题 面向对象语言:接近人类的认知,万物抽象成对象,对象间的关系抽象成类和继承 程序=数据结果+算法 Python解释器 CPython:由C ...

  9. Python语言基础06-字符串和常用数据结构

    本文收录在Python从入门到精通系列文章系列 1. 使用字符串 第二次世界大战促使了现代电子计算机的诞生,最初计算机被应用于导弹弹道的计算,而在计算机诞生后的很多年时间里,计算机处理的信息基本上都是 ...

  10. 通过premake生成vs工程文件

    visual studio的工程视图,在引用外部目录时非常麻烦,这时候可以使用premake一键生成工程文件,自动配置好工程的各种属性,还有目录的组织结构. 示例:如下是一个c++的外部目录结构,我们 ...