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

2018-06-24 00:35:19来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

0 问题描述

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

正常情况

1

滚动条

2

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.innerWidthwindow.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。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:SVG图形引用、裁切、蒙版

下一篇:网站的监控指南