Vue3 移动端浏览器底部工具栏挡住部分网页，以及ios网页放大滑动问题。

刘锋林

已于 2022-09-21 09:21:35 修改

阅读量2k

点赞数 4

分类专栏： Vue3移动端问题文章标签： javascript 开发语言 vue

于 2022-09-20 20:44:00 首次发布

本文链接：https://blog.csdn.net/weixin_44076777/article/details/126961185

版权

Vue3移动端问题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ios网页放大问题，一般来说点击input框会放大。或者双指缩放。这个非常影响用户体验。

解决方法：在index.html中，添加meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

浏览器底部工具栏挡住部分网页问题。这样有时候跳转页面的按钮会在底部，然后看不到。

解决方法：监听页面resize和DOMContentLoaded,然后改变页面的大小，固定为window.innerHeight。

window.addEventListener("resize", ()=>{
    heightTemp.value = (window.innerHeight)+"px";
    document.getElementById("app").style.height = heightTemp.value;
  });
  window.addEventListener("DOMContentLoaded", ()=>{
    heightTemp.value = (window.innerHeight)+"px";
    document.getElementById("app").style.height = heightTemp.value;
  });

ios网页滑动问题。

解决方法：监听这几个放大。

let lastTouchEnd = 0
  document.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
      event.preventDefault()
    }
  })
  document.addEventListener('touchend', function (event) {
    let now = (new Date()).getTime()
    if (now - lastTouchEnd <= 300) {
      event.preventDefault()
    }
    lastTouchEnd = now
  }, false)
  // 阻止双指放大
  document.addEventListener('gesturestart', function (event) {
    event.preventDefault();
  })