vue H5 IOS键盘弹起页面左右滑动问题

531 阅读1分钟

问题

最近做的一个微信H5的项目,在input元素中,键盘弹起页面会出现左右滑动,这种问题只出现在IOS手机上,安卓暂时没有

/*自己当前页面的css样式*/
.index-page{
  position: absolute;
  top: 0;
  width:100%;
  bottom: 0;
  overflow: hidden;
  overflow-y: scroll;
  background: linear-gradient(
    to bottom,
    rgba(165, 0, 92, 1),
    rgba(165, 0, 92, 0) 35%
  );
  // padding: 0 30px;
  box-sizing: border-box;
  padding-top: 90px;
  padding-bottom: 100px;
}

初次解决IOS的页面的回弹

html,body{
    overflow: hidden;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

IOS页面回弹已经被禁止了,但是还是会出现左右的滑动问题

最后发现

emmmmmm。。。。键盘弹起,页面放大。。。

image

<!--头部加上它就不放大了-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />