iframe ios中h5页面 样式变大

实际项目开发中，iframe在移动设备中使用问题还是很大的，说一说我的那些iframe坑

  做过的这个后台管理框架，最开始的需求是PC，但随着业务需要，需要将项目兼容到ipad，后台的框架也是使用的开源框架开发，使用的是iframe嵌套页面的方式

1、内部嵌入iframe，里面的内容页面中有绝对定位的元素，会有问题！

 

现象：项目中嵌入 　　

// 这种放大也可能是轮播外侧没有嵌套一层标签所致，手机单独浏览没有问题，如果嵌入iframe ios手机就会出现

再测发现ios android 受到scrolling="no"影响，需要判断一下设备类型，在data里面定义一个type变量，created钩子函数里面执行这个代码判断如何显示就ok了

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.type = true
}else{
　　this.type = false
}

 

因为嵌入的页面不统一，发现使用如上的方法仍然导致部分页面或多或少的出现问题，后来我将提供嵌入的页面，每一个都做了测试，发现内部页面会不能正常显示，除了外部的布局外，内部的页面布局也会有影响，需要同时做修改，否则页面无法达到需求标准，最终功能并没有上线，不过可以总结出：移动端frame嵌入页面注意的问题还是很多的，简单的还好，复杂嵌入请谨慎使用。

 

 

 

转载于:https://www.cnblogs.com/lisaShare/p/9720092.html