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。

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

  1. 浏览器缩放导致的样式bug

    缩放75% 这种问题修改的话 要兼顾多种浏览器,并且有些地方样式是要求写死的,修改成本会比较大,所以一般是不会去处理的

  2. mac下出现xcrun: error导致git、svn无法使用的解决办法

    现象:xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun ...

  3. 阻止pc端浏览器缩放js代码

    阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...

  4. win7下firefox浏览器不能使用

    win7下firefox浏览器不能使用,只有360浏览器才能使用. 使用360安全卫士,到更多工具里面选择"LSP修复",就可以了. 原来是因为安装了土豆加速,然后卸载导致的. 看 ...

  5. C#:涉及DPI的高分辨率下的显示问题

    一.背景 在PC机上显示正常,在高分辨率下的Pad上,显示出现问题: 1.显示在屏幕最右端的窗体(控件)显示不出来: 2.截图时,被截图的界面字体文字变大,界面因此显示不全. 二.解决方法: 方法一: ...

  6. jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法

    前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...

  7. CSS 实现背景图尺寸不随浏览器缩放而变化

    <!-- Author:博客园小dee --> 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.hu ...

  8. 学python走过的坑 三 不能实现的浏览器缩放功能

    公司一个项目,在启动web页面时,默认应该是打开项目页面,然后浏览器启动时总是打开一个广告页面,经理让写一个脚本,让电脑每次开机自启浏览器,且加载项目页面.浏览器自启和打开项目页面轻松搞定,这时问题来 ...

  9. js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小

    众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但 ...

随机推荐

  1. 从零开始编写自己的C#框架（25）——网站部署

    导航 1.关掉访问保护 2.发布网站 3.复制网站到服务器 4.添加新网站 5.设置网站访问权限 6.设置文件夹访问权限 7.控制可更新文件夹执行权限 8.设置“应用程序池”.net版本与模式 9.附 ...

  2. 从零开始编写自己的C#框架（24）——测试

    导航 1.前言 2.不堪回首的开发往事 3.测试推动开发的成长——将Bug消灭在自测中 4.关于软件测试 5.制定测试计划 6.编写测试用例 7.执行测试用例 8.发现并提交Bug 9.开发人员修复B ...

  3. B样条基函数的定义和性质

    定义:令U={u0,u1,…,um}是一个单调不减的实数序列,即ui≤ui+1,i=0,1,…,m-1.其中,ui称为节点,U称为节点矢量,用Ni,p(u)表示第i个p次(p+1阶)B样条基函数,其定 ...

  4. MySQL优化聊两句

    原文地址:http://www.cnblogs.com/verrion/p/mysql_optimised.html MySQL优化聊两句 MySQL不多介绍,今天聊两句该如何优化以及从哪些方面入手, ...

  5. JavaScript学习笔记(二)——闭包、IIFE、apply、函数与对象

    一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div, ...

  6. CentOS：Yum源的配置

    # cd /etc/yum.repos.d/ # mv CentOS-Base.repo CentOS-Base.repo.bak # wget http://mirrors.163.com/.hel ...

  7. FineReport:任意时刻只允许在一个客户端登陆账号的插件

    在使用FineReport报表系统中,处于账户安全考虑,有些企业希望同一账号在任意时刻智能在统一客户端登录.那么当A用户在C1客户端登陆后,该账号又在另外一个C2客户端登陆,服务器如何取判断呢? 开发 ...

  8. 二叉树的创建和遍历(C版和java版)

    以这颗树为例:#表示空节点前序遍历(根->左->右)为:ABD##E##C#F## 中序遍历(左->根->右)为:#D#B#E#A#C#F# 后序遍历(左->右-> ...

  9. jsp

    -----------------

  10. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...