vue iframe嵌套页面高度自适应 (ios 宽度扩大的bug , ios展示比例问题)

时间:2022-06-29 06:20:01

<template>   <div class="card-index pt-relative">     <div id="wrapper" :style="‘height:‘ Height ‘px;‘">       <iframe         v-if="iframeType"         :src="srcUrl"         sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-modals"         id="iframe"         marginwidth="0"         marginheight="0"         align="center"       ></iframe>

 

      <iframe         v-else         :src="srcUrl"         sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-modals"         id="iframe"         scrolling="no"         marginwidth="0"         marginheight="0"         align="center"       ></iframe>

 

        </div>   </div> </template>      data() {     return {       srcUrl: "",       iframeType: false     };   },  created() {  var u = navigator.userAgent;     var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端     // var isiOS = !!u.match(/(i[^;] ;( U;)? CPU. Mac OS X/); //ios终端     // console.log(‘是否是Android:‘ isAndroid);     // console.log(‘是否是iOS:‘ isiOS);     if (isAndroid) {       this.iframeType = true;     } else {       this.iframeType = false;     } }
<style lang=‘scss‘ scoped> .card-index /deep/ {   width: 100%;   position: relative;   #iframe {     width: 100%;     height: 100%;     overflow: scroll;     -webkit-overflow-scrolling: touch;     min-width: 100%;     *width: 100%;     width: 1px;   }
  #wrapper {     -webkit-overflow-scrolling: touch;     overflow: auto;     position: fixed;     right: 0;     left: 0;     top: 0;     bottom: 0;     width: 100%;     height: 100%;   }   </style>