0 问题描述

由于需要演示触控操作，采购了SurfacePro，SurfacePro的推荐分辨率为2736×1824，且默认缩放比例为200%，IE浏览器的默认缩放比例也是200%，这样就导致右侧出现了竖直滚动条。整个界面的高度是通过计算得出并控制的，按理来说不应该出现这个垂直方向的滚动条。

正常情况

滚动条

1 问题排查

由繁化简，快速定位

为排除界面元素干扰，直接新建了一个干干净净的页面，里面除了引用了原页面所使用的CSS外，只留了一个包含test文本的h1标签。

<!DOCTYPE html>
<html>
<head><link href="~/Content/css/bootstrap.min.css" rel="stylesheet"><link href="~/Content/css/font-awesome.css" rel="stylesheet"><link href="~/Content/css/animate.css" rel="stylesheet"><link href="~/Content/css/style.css" rel="stylesheet"><link href="~/Content/plugins/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /><link href="~/Content/plugins/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
</head>
<body><h1>test</h1>
</body>
</html>

对于这样一个页面，在SurfacePro的高分辨率，200%缩放比例下仍然会出现滚动条，进一步定位，逐条删除上方的css样式引用，发现当删除bootstrap.min.css的时候，滚动条就神奇的消失了，至此可以判断肯定是因为bootstrap的样式引起的。但具体是什么原因，经过F12查看，排查字体、Margin等各种设置，均没有找到答案。

折半查找，逐一过滤

无奈下只好采用最原始粗暴，也是最简单有效的折半查找排除法，无法是需要稍微耗费时间与耐心，查看bootstrap.css文件，一共7000多行，我们直接删除大概前3500位置的css样式，如果问题解决了，就说明问题出在前3500行的样式中，如果问题没解决，则可以肯定问题出在后面3500行样式中，然后同样对后面3500行取前1750行做删除或注释处理，进一步定位，如此反复，终于确定了问题所在。大致在6800行处有这么一句样式：

@-ms-viewport {width: device-width;
}

注释掉，问题解决。

2 Viewport 与 device-width

既然找到了问题所在，难免要探究一下Viewport与device-width究竟是干嘛的，有什么用处，为什么会引起这种问题。以下为网络上找到的解释。

Viewport

viewport，翻译为视口，也即可视区域的大小，PC端通过 window.innerWidth 和 window.innerHeight 获取。

html元素也即文档的宽度，来自于viewport的宽度，在PC端要加上滚动条的宽度才会与viewport的宽度一样。因此，文档的宽度最终来自于viewport的宽度，PC端通过 window.innerWidth 获取。

而在移动端，情况将变得复杂。

首先，上面提到文档的宽度来自于viewport的宽度，我们把这个viewport称为layout viewport，因为它和布局有关。在手机上面，因为手机的屏幕很小，当初iphone发布时，为了显示完整的桌面网页，就把给layout viewport设置了一个980px的值。手机上，可以通过 document.documentElement.clientWidth 来获取，我在安卓手机上测试也是980px。

但是这样显示网页，那网页的字体、元素都很小，小到打开这样一个网页，首先要做的就是放大页面。为了提高可读性，Apple允许通meta标签来设置layout viewport的宽度，也即文章开头的那行代码。

但是，device-width又是什么呢？

第一代iphone的分辨率为320*480，屏幕尺寸为3.5寸。当时把layout viewport设置成与浏览器宽度一样（而手机上浏览器宽度与手机屏幕宽度一样）时，不用每次打开网页放大了，而且显示的字体与桌面上差不多，可读性很好。因此就定义了一个device-width，即是手机的屏幕分辨率，此时device翻译为“设备”还合适。

但是第二代iphone发布时，屏幕的分辨率变成了480*960，而屏幕尺寸仍然为3.5寸，如果device-width仍然为手机的屏幕分辨率宽度，那么字体将会比第一代小很多。所以，维持device-width的值不变将会是个很好得选择，能与前面兼容。也因此，iphone上的device-width的值一直为320，只不过device再表示“设备”已经不合适了，实际上代表的是一个中间层。而Android也采用了这一概念，其device-width的值为360的多，360=540/1.5，360=720/2。

转载于:https://www.cnblogs.com/fonour/p/6000447.html

高分辨率下IE浏览器缩放导致出现右侧滚动条问题的解决相关推荐

解决WPS高分辨率下因字体缩放导致字体发虚的问题
安装 yay -S ttf-wps-fonts wps-office-mui-zh-cn wps-office-mime-cn wps-office-cn # 可选字体 yay -S wps-offi ...
解决浏览器缩放导致页面显示不全问题
问题 pc端web页面开发时,发现windows系统经常推荐用户使用125%.150%比例的缩放窗口,这样导致web页面被进行缩放,除此之外还有人为的按钮缩放.故此,在页面devicePixelRat ...
浏览器缩放导致table表格错位样式问题的解决
html table表格在浏览器缩放100%时正常显示但人们有时会缩放90或者更小,这时样式便出现了问题,错位了,该如何解决呢? table需加css样式: table-layout:fixed.
页面找不到了无法解析服务器,win10下搜狗浏览器无法解析服务器的dns地址如何解决...
搜狗浏览器能够给我们带来很棒的网页浏览体验,功能也十分强大.不过,最近一些win10系统用户反馈自己打开网页提示页面找不到了... 错误信息:如法解析服务器的dns地址导致无法打开网页.这是怎么回事 ...
Ubuntu下Chrome浏览器不能以根用户身份运行的解决方法
Google Chrome浏览器不能以根用户身份运行解决解决方案一: 找到google-chrome 的快捷方式右击查看属性找到命令即得到google-chrome 的地址. 如:/usr/b ...
ie浏览器自动拦截html,win10系统下IE浏览器总是阻止页面窗口弹出怎么办
不少朋友在使用ie浏览器浏览网页时都遇到过页面被阻止,弹不出来的问题,并且还会提示"Internet Explorer 已对此页面进行了修改,以帮助阻止跨站脚本.单击此处,获取详细信息... ...
引导区坏计算机无法启动,windows7旗舰版系统下注册表损坏导致无法引导启动怎么解决...
最近有windows7旗舰版系统用户到本站反映说碰到这样一个现象,就是注册表损坏了,导致无法引导启动,该怎么解决这样的情况呢,本文就给大家分享一下windows7旗舰版系统下注册表损坏导致无法引导启动 ...
去除mac系统下浏览器烦人的右侧和下侧广告条
不知道从什么时候开始在mac系统下用浏览器浏览网页右侧或下侧都会出现一个广告条,每次都是手工点击叉关闭,但刷新页面或跳转页面还会出现,真是太烦人了,终于找到解决办法了,原来是一个叫"Yont ...
联想涉密专用计算机字体,Lenovo出厂高分屏笔记本高分辨率下字体模糊的解决方法...
现在很多电脑都带有高分辨率的屏幕,但由于Windows系统使用DPI调整方式,所以对于某些软件在高分辨率下,由于系统的原因无法呈现出完美的效果.下面就提供几种调试的方法. 1.显卡驱动对于笔记本来讲 ...

高分辨率下IE浏览器缩放导致出现右侧滚动条问题的解决