移动端开发所遇到过的坑
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; }
posted on 2017-09-01 14:43 zhoujian917 阅读(223) 评论(0) 编辑 收藏 举报