手写签名识别项目2--问题记录

  |  

前言

这篇博客记录一下项目中出现的问题


31



背景图片全屏兼容问题

项目刚开始就遇到了问题,因为以前没做过移动端的问题所以一开始就遇到了图片全屏并兼容的问题。

主要问题在于,图片全屏后还能向上滑动,还存在一个滑动条,向上滑动,上方就会出现空白。而且部分屏幕较长的设备,下方并不能铺满

1

问题出现的原因:主要还是自己不小心,再用vue-cli搭建完项目后没有将初始部分清理完全,留下了部分CSS

2

主要就是App.vue中遗留的margin-top导致的

附上全屏兼容的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.main {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
top:0;
z-index: -1;
position: absolute;
}
.bgImage {
display: block;
outline: none;
border:0;
height: 100%;
width: 100%;
object-fit: cover;
}

需要注意的是,图片的父级元素也要设置宽高为100%,并且将margin和padding设置为0,防止出现白边

文章目录
  1. 1. 背景图片全屏兼容问题