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

电脑上的缩放:

浏览器上的缩放:

解决方法

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. JSON转成List结构数据

    先要引入对应的jar,然后调用net.sf.json库的 ObjectMapper mapper = new ObjectMapper(); JavaType javaType = mapper.ge ...

  2. [KMP]一本通(http://ybt.ssoier.cn:8088) 1698:字符串匹配

    字符串匹配 [题目描述] 对于一个字符集大小为C的字符串pp,可以将任意两个字符在p中的位置进行互换,例如p=12321,交换1.21.2得到21312,交换1.4得到42324,交换可以进行任意次. ...

  3. 【EasyExcel】使用easyExcel过程中,项目报错的解决集合

    报错:Can not close IO [ERROR] 2019-11-02 13:51:21.210 [ProExportSkuDataJob-1455-TaskThread-1] [com.dma ...

  4. Kafka学习笔记之Kafka Consumer设计解析

    0x00 摘要 本文主要介绍了Kafka High Level Consumer,Consumer Group,Consumer Rebalance,Low Level Consumer实现的语义,以 ...

  5. C# 学习笔记 多态(二)抽象类

    多态是类的三大特性之一,抽象类又是多态的实现方法之一.抽象类是什么呢,如果把虚方法比作一个盛有纯净水的杯子,那么此时的“纯净水”就是事先定义好的方法,我们可以根据不同的需求来改变杯子中所事先盛放的是“ ...

  6. C# 多线程处理List数据

    代码思路 将要处理的数据放到ConcurrentQueue中,然后开启多个线程去处理数据,处理完成后,再到队列中获取下一个待处理数据. ConcurrentQueue 表示线程安全的先进先出 (FIF ...

  7. JVM 学习总结

    目录 Java内存区域 运行时数据区 & Java 内存结构 & Java 内存区域 1. 程序计数器 2. Java 虚拟机栈 3. 本地方法栈 4. 堆 5. 方法区 6. 运行时 ...

  8. docker 制作一个容器,并上传到仓库

    创建镜像的三种方法 1.基于已有的镜像的容器创建 启动一个容器并修改容器: docker run -it ubuntu:latest /bin/bash touch test 提交创建新镜像并查看制作 ...

  9. 用python登录12306 并保存cookie

    一篇拿来记录的文章,是看其他博主写的,想在这记一下 import sys import time import requests from PIL import Image import json i ...

  10. Spring框架完全掌握(上)

    引言 前面我写了一篇关于Spring的快速入门,旨在帮助大家能够快速地了解和使用Spring.既然是快速入门,讲解的肯定只是一些比较泛的知识,那么对于Spring的一些深入内容,我决定将其分为上.下两 ...