在iPhone瀏覽器上滾動頁面時，頁面出現了橡皮筋效果

layout.vue

<template>
    <div class="layout">
        <header></header>
        <router-view/>
        <footer></footer>
    </div>
</template>
...

方法二： fixed定位

檢查問題，發現頁面沒高度，解決辦法：
html,body統一設為100%，在父元件的根元素設定position:fixed可以使頁面無橡皮筋效果

<style>
.layout{
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>

不要將手機頁面的高度設為100vh，手機瀏覽器上有位址列，下有功能鍵，會佔據高度。

方法二：阻止body的touchmove事件

單純解決橡皮筋效果，可以將body的touchmove事件禁止，可以替代第一種方法

// App.vue

mounted () {
    document.body.addEventListener('touchmove'
 
, function (e) {
        e.preventDefault() // 阻止預設的處理方式(阻止下拉滑動的效果)
    }, {passive: false}) // passive 引數不能省略，用來相容ios和android
}