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

电脑上的缩放:

浏览器上的缩放:

解决方法

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. JavaScript DOM 常用操作

    1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...

  2. Python sorted 函数

    Python sorted 函数 sorted 可以对所有可迭代的对象进行排序操作,sorted 方法返回的是一个新的 list,而不是在原来的基础上进行的操作.从新排序列表. sorted 语法: ...

  3. 【07】Nginx:状态统计 / 状态码统计

    写在前面的话 在 nginx 中,有些时候我们希望能够知道目前到底有多少个客户端连接到了我们的网站.我们希望有这样一个页面来专门统计显示这些情况.这个需求在 nginx 中是可以实现的,我们可以通过简 ...

  4. Asp.Net真分页技术

    最近学校要做课题,闲来没事研究了下Asp.net的分页,我使用Repeater进行数据的绑定,每次从数据库读取到8条数据填充到Repeater中,这样搞可以降低数据库的压力,提高效率. 效果图如下: ...

  5. Winforn中使用FastReport实现点击导出按钮PDF预览并弹出另存为对话框

    场景 FastReport安装包下载.安装.去除使用限制以及工具箱中添加控件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  6. Java学习——网络编程

    Java学习——网络编程 摘要:本文主要介绍了什么是网络编程,以及如何使用Java语言进行网络编程. 部分内容来自以下博客: https://www.cnblogs.com/renyuan/p/269 ...

  7. Eureka获取服务列表源码解析

    在之前的文章:EurekaClient自动装配及启动流程解析中,我们提到了在类DiscoveryClient的构造方法中存在一个刷新线程和从服务端拉取注册信息的操作 这两个就是eureka获取服务列表 ...

  8. Linux文件查找与打包

    一.文件查找 locate与find是经常使用的Linux 命令,刚接触Linux时对这两个命令的使用傻傻的分不清.现在我们来对比一下两个命令到底有哪些区别. 1.1 locate locate让使用 ...

  9. p12证书

    http://my.oschina.net/u/1245365/blog/196363

  10. Mac OSX(Mac OS10.11) 安装 pwntools 失败的最新解决方案

    pwntools是一个 CTF 框架和漏洞利用开发库,用 Python 开发,由 rapid 设计,旨在让使用者简单快速的编写 exploit. 网上针对 Mac OS 的安装教程大多都是基于 pip ...