web后台适配移动端

说明：本文适配移动端才用的是放大缩小网页的方式，并非完美适配，只是为了快速解决移动端的显示异常问题。

一、固定视口宽度

<meta name="viewport" content="width=1920 initial-scale=1.0, user-scalable=yes " />

我这里为了方便快速实现web网页的使用，固定了视口宽度为1920px并且允许缩放，设置了这个之后大多数移动设备都可以缩放来操作了，但是还有部分设备不行，排查了一下发现#app(最外层元素) 被设置了position: fixed;,将定位改为position: relative;后可正常缩放了；

改完定位后又发现底部有空白区域，但是并未发现有实际元素，排查发现有个宽度高度皆为0的控件元素，于是将这个元素加上position: absoulte;后去除了白色区域；

移动端设备内容显示不全却又无法滚动的排查方法

1. 溢出隐藏：检查 body 或 html 元素是否有 overflow: hidden 或其他 CSS 规则，可能阻止了内容的滚动。
2. 固定定位：如果页面上有使用 position: fixed 的元素，可能会影响滚动行为。
3. 内容层级：确保滚动条的层级没有被其他内容遮挡。你可以使用浏览器开发者工具检查元素的布局和样式。
4. JavaScript：确认没有 JavaScript 代码对滚动行为进行干预，如 preventDefault() 方法阻止了滚动事件。

排查空白区域方法

1. 检查伪元素：使用浏览器的开发者工具，检查是否有伪元素被用来创建这个白色区域。
2. 查看隐藏元素：通过开发者工具检查所有隐藏的元素，确保它们不会影响页面布局。
3. 检查 CSS 样式：查找任何可能影响页面底部的样式，如负外边距、背景色、填充等。
4. 测试不同的屏幕尺寸：在不同的屏幕尺寸下查看页面，确定是否仅在特定情况下出现白色区域。

二、检查是否有使用vh来计算获取高度

实现自由缩放大小后，发现分页部分在部分移动端设备获取异常，检查后发现页面使用100vh来减去头尾的高度来计算中间内容区域的高度，因为部分移动设备的头部导航栏会占用高度，导致计算的时候出现问题，无法正确显示底部分页，给#app(最外层元素)加上height:100vh即可

#app {
  width: 100%;
  position: relative;
  /* position: fixed; */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* height: 100%; */
  /* 用100vh代替100%防止移动端设备顶部导航栏占据空间导致一些地方使用vh去计算高度的地方显示异常，例如分页 */
  height: 100vh;
  min-width: 1200px;
  min-height: 605px;
}