.about-us-page{overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;position: relative;}

iframe{width: 1px; min-width: 100%; *width: 100%;}

$(function () {

//判断电脑端还是手机端

if(/iPhone|iPad|iPod/i.test(navigator.userAgent)) {

$('#zhx-iframe').attr('scrolling','no')

}

//计算iframe高度

$('#about-us-page').css({'height':$(window).height()-$('.ui-footer').height(),'width':$(window).width()});

$('#zhx-iframe').css({'min-height':$(window).height()-$('.ui-footer').height()});

})

ios系统 添加scrolling=no属性,iframe属性为width: 1px; min-width: 100%; *width: 100%;,iframe外层属性为overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;

此上已实现页面显示正常,但是页面上点击标签跳转到对应位置 功能失效,需要优化iframe内页外层样式,即:

body{position: fixed; width: 100%; height: 100%; overflow: hidden;padding-top: 0;}

.zhouse-page{ height: 100%;overflow-y: scroll;overflow-x: hidden;-webkit-overflow-scrolling:touch;}

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐