移动端-002-viewport

viewport

尺寸的区别

屏幕的尺寸

  • 就是电脑设置的分辨率
    • mac pro 默认 screen.width 为 1440
1
2
screen.width
screen.height

窗口的尺寸

  • 浏览器窗口的大小
1
2
window.innerHeight
window.innerWidth

viewport的概念

对于页面一个div的宽度，我们设置width:10%; 这是 10%是相对于谁？最终是多宽

  • div宽度首先是相对于父亲 也就是 body的 10%
  • body的宽度，因为它是撑满html的，所以它应该和 html等宽，注意 body是有 margin的 ，清除margin 后html和body的宽度就都一致了
  • html的宽度是多少呢？ html和窗口等宽
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>
    <html>
    <head>
      <style>
        .aaa{
          height: 300px;
          width: 10%;
          background:red;
        }
      </style>
    </head>
    <body>
      <div class="aaa"></div>
    </body>
    </html>

测试viewport

document.documentElement.clientWidth 和 document.documentElement.clientHeight 测试视窗宽高

document.documentElement.clientWidth 和 window.innerWidth 的区别

当页面出现滚动条的时候

  • document.documentElement.clientWidth 不包含滚动条
  • window.innerWidth 包含滚动条

测量html的宽高

1
2
document.documentElement.offsetHeight 
document.documentElement.offsetWidth

移动端的 viewport

差异：屏幕太窄了，基本没有宽度超过400px的

此时有个网站 设置min-width:1000px比如有个侧栏 宽度为10% 那么 在PC没有问题，到了手机就会有问题，因为手机总共不超过 400px 宽度 ，这就导致了一个侧栏就占了屏幕的三分之一

为了解决这个问题 手机浏览器的厂商就提出了 两个概念 visual viewport 和 layout viewport

visual viewport 和 layout viewport

  • visual viewport 可视窗口：移动端视窗的设备独立像素
  • layout viewport 用于布局的窗口：页面渲染时参考的宽高

在移动端，页面渲染以 layout viewport 宽度作为计算标准。以iphone 为例，其 layout viewport 是980px,页面渲染时就认为窗口为 980px。 一些老网站（没做移动端适配） 在手机打开的时候就会按照 980的宽度计算 相当于 把980px的宽度内容缩小到手机上显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
  <style>
    .btn {
      background:red;
      width:98px;
    }
    .btn2{
      background:red;
      width:100%;
    }
  </style>
</head>
<body>
  <div class="btn">98px</div>
  <hr>
  <div class="btn2">100%</div>
</body>
</html>
  • 手机端显示 98px的按钮就被缩小了
    • 而且 document.documentElement.clientWidth 一取是 980px，你就懵逼了。
  • PC端显示 98px就很正常

总结

移动端渲染的时候不去管你窗口是多大，他就认为我的宽度是980，然后按照980去渲染这个页面,同样的内容 你看到PC在看手机 感觉手机上的内容缩小了。

现在做唯一的修改

1
2
3
4
5
6
7
8
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

快捷键是输入 meta:vp + tab键

效果就是 
layout viewport 的宽度 = device width

此时再去做布局的时候，缩放比就为1:1，就达到 你写100px 在手机上也显示为 100px