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

电脑上的缩放:

浏览器上的缩放:

解决方法

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. WEB测试应该注意哪些地方,怎样才能做好WEB测试

    基于Web的系统测试与传统的软件测试既有相同之处,也有不同的地方,对软件测试提出了新的挑战.基于Web的系统测试不但需要检查和验证是否按照设计的要求运行,而且还要评价系统在不同用户的浏览器端的显示是否 ...

  2. 使用NumPy、Numba的简单使用(一)

    Numpy是python的一个三方库,主要是用于计算的,数组的算数和逻辑运算.与线性代数有关的操作. 很多情况下,我们可以与SciPy和 Matplotlib(绘图库)一起使用.来替代MatLab,下 ...

  3. CMake编译的VS工程,安装时遇到错误:error MSB3073: 命令“setlocal

    错误提示 70>CMake Error at src/base/cmake_install.cmake:63 (file): 70> file INSTALL cannot find 70 ...

  4. ConstraintLayout 用法

    当前描述是基于constraint-layout:1.1.2. 一.前言 在以前,android是使用布局如LinearLayout .RelativeLayout等来构建页面,但这些布局使用起来很麻 ...

  5. bootstrap基础样式学习(一)

    1.按钮btn .btn 按钮基础的样式 .btn-default 白底黑子的按钮 .btn-danger/warning/success/info/primary .btn-lg/sm/xs 按钮大 ...

  6. supervisor 管理应用程序

    supervisor 进程管理 主要包含后台进程 supervisord 和控制台 supervisorctl 两个程序 supervisor # 官方文档 http://www.supervisor ...

  7. Centos7 安装使用virtualenvwrapper

    退出所有的虚拟环境,在物理环境下安装 1.下载安装virtualenvwrapper pip3 install virtualenvwrapper 2.查看python3的文件和virtualenvw ...

  8. 7. [mmc subsystem] host(第一章)——概述

    一.host简单说明 host,也可以理解为host controller,是指mmc总线上的主机端,mmc总线的控制器,每个host controller对应一条mmc总线. host contro ...

  9. Celery详解(3)

    1.什么是Celery? Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统 专注于实时处理的异步任务队列,同时也支持任务调度 2.Celery架构 Celery的架构由三部分组成,消息中 ...

  10. c# 第二节 c#的常用IDE环境

    本节内容: 1:常用ide环境 2:Visual Studio 简介 3:Visual Studio Express简介 4:Sharp Develop 5:  IDE 与 .Net的版本 1:常用i ...