移动端APP开发遇到的问题

1，移动端100vh的问题

问题描述

在移动端使用 100vh 时，发现在 Chrome、Safari 浏览器中，因为浏览器栏和一些导航栏、链接栏导致不一样的呈现：

你以为的 100vh === 视口高度

实际上 100vh === 视口高度 + 浏览器工具栏（地址栏等等）的高度
如图

image.png

真是的情况就会出现滚动条

解决方案

vh-check npm install vh-check --save

import vhCheck from 'vh-check';
vhCheck('browser-address-bar');

定义一个 CSS Mixin

@mixin vh($height: 100vh) {
  height: $height;
  height: calc(#{$height} - var(--browser-address-bar, 0px));
}

之后就是哪里不会点哪里。哈哈
在需要使用的页面上使用该混入css

container{
  @include vh(100vh);
}