移动端开发所遇到过的坑

时间：2022-06-16 21:22:56

1.ios9.3使用for in进行双重循环，出现循环出错问题？

解决：使用基本的for循环即可解决

2.页面引入iframe，ios手机上iframe宽度超出父级的宽度（ios专属bug）？

解决：

<div class="shop-intro" style="display: block;width:100%;overflow: hidden;">
    <iframe src="productDetail.introUrl"  scrolling="no" style="overflow: scroll;-webkit-overflow-scrolling: touch;min-width: 100%;*width:100%;width:1px;"></iframe>
</div>

3.页面引入iframe，如何获取iframe的高度，撑开父级而不出现滚动条？

jq解决方法：

<body>
<div class="div">
    <iframe src="frame.html" id="iframe_content" width="100%"></iframe>
</div>
<script src="jquery.min.js"></script>
<script>
    setIframeHeight('iframe_content')
    function setIframeHeight(id){
        try{
            var iframe = document.getElementById(id);
            if(iframe.attachEvent){
                iframe.attachEvent("onload", function(){
                    iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;
                });
                return;
            }else{
                iframe.onload = function(){
                    iframe.height = iframe.contentDocument.body.scrollHeight;
                };
                return;
            }
        }catch(e){
            throw new Error('setIframeHeight Error');
        }
    }
</script>

vue解决方法：

<div class="shop-intro" style="display: block;width:100%;overflow: hidden;">
    <iframe v-bind:src="productDetail.introUrl"  ref="iframe" @load="loaded" scrolling="no" style="overflow: scroll;-webkit-overflow-scrolling: touch;min-width: 100%;*width:100%;width:1px;"></iframe>
</div>
loaded: function(){
    var vm = this.$refs.iframe.contentWindow.document.body.clientHeight;
    this.$refs.iframe.height = vm;
},

4.vue开发中使用axios，在安卓4.3上axios有兼容问题？

解决：可自己封装ajax或引入jquery，不过vue中引入jquery是不建议这样做的。

5.移动端字体单位font-size选择px还是rem?
// 如需适配多种移动设备，建议使用rem。以下为参考值：
html { font-size: 62.5%; }   //10*16 = 62.5%
//设置12px字体   这里注意在rem前要加上对应的px值，解决不支持rem的浏览器的兼容问题，做到优雅降级
body { font-size:12px; font-size:1.2rem; }   



标签：

相关文章