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

电脑上的缩放:

浏览器上的缩放:

解决方法

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. PHP高级进阶梳理

    基础篇 1.深入理解计算机系统 2.现代操作系统 3.C程序设计语言 4.C语言数据结构和算法 5.Unix环境高级编程 6.TCP/IP网络通信详解 7.Java面向对象编程 8.Java编程思想 ...

  2. 升级 ASP.NET Core 3.0 设置 JSON 返回 PascalCase 格式与 SignalR 问题

    由于一些 JS 组件要求 JSON 格式是 PascalCase 格式,新版本 ASP.NET Core 3.0 中默认移除了 Newtonsoft.Json ,使用了微软自己实现的 System.T ...

  3. 纯C语言实现链栈

    #include <stdio.h> #include <stdlib.h> typedef int ElemType; typedef struct StackNode{ E ...

  4. Python【day 11】闭包

    闭包 1.闭包的概念: 嵌套函数中,父级函数的变量,在子集函数中用到了(访问.修改.返回),那么这个变量就被保护起来了 只有自己可以修改,父级函数()()就是闭包函数 2.闭包的特点: 1.常驻内存 ...

  5. SpirngBoot整合Spring-data-JPA

    0.引言 使用SpringBoot data jpa技术相比mybatis是比较难的,这里只给出整合方法 1.引入SpringBoot data jpa <!--JPA依赖--> < ...

  6. php报错Array to string conversion 解决方案,动态输出数据库列名称

    php报错Array to string conversion 解决方案,动态输出数据库列名称 问题:在Windows php5.3环境下使用:<?php echo $row->$keys ...

  7. 深入理解Vue组件3大核心概念

    摘要: 搞懂Vue组件! 作者:浪里行舟 原文:详解vue组件三大核心概念 Fundebug经授权转载,版权归原作者所有. 前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽 ...

  8. jQuery中$符号的作用

    jQuery中$符号的作用 1.查找作为jQuery包装器,利用选择器来选择DOM元素(这个也是最强大的功能) 例如:$("table tr:nth-child(even)") 基 ...

  9. 1.说一下的 dubbo 的工作原理?注册中心挂了可以继续通信吗?说说一次 rpc 请求的流程?

    作者:中华石杉 面试题 说一下的 dubbo 的工作原理?注册中心挂了可以继续通信吗?说说一次 rpc 请求的流程? 面试官心理分析 MQ.ES.Redis.Dubbo,上来先问你一些思考性的问题.原 ...

  10. osi7层