现有IOS应用，邮箱功能需要预览邮箱内容，但是邮箱内容都是有固定高宽，也就是这个页面实际上是在PC上显示，
所以现在，在APP上预览时就出现内容过宽，过长；导致APP页面被拉伸变的很丑；
html中使用的iframe嵌套的邮箱内容；网上都说IOS上使用iframe有诸多问题，实际上我并没有发现像网友说的那么不堪；
使用iframe嵌套网页后，使用scale进行缩放会存在，下端空白问题。
现在说一下解决方案，直接贴代码：
HTML代码：
原JS代码：
var clientWidth = ;
console.info("clientWidth:" + clientWidth);
var contentDoc = ("mailContent");
= content;
let ifr = ('mailContent');
= function () {
let wd = ;
let ht = ;
let x = ('mailContent').clientWidth / wd;
= wd + 'px';
= ht + 'px';
= `scale(${x})`;
= '0 0';
('mailFormData'). = clientWidth - 20 + "px";
let box = ('mailFormBox');
= ht * x + 'px'
= clientWidth - 20 + "px";
}
这样处理的代码只是宽度变了而已，缩放了，但是就出现了上面说的空白，因为这个网页内容很长；所以缩放后实际高度是没有变的
处理后的代码：
var clientWidth = ;
("clientWidth:" + clientWidth);
var contentDoc = ("mailContent");
= content;
var ifr = ('mailContent');
var screenW = ;
= function () {
var ifrDocument = ;
var wd = ;
var ht = ;
var x = screenW / wd - 0.02;
(screenW + ":" + wd);
= wd + 'px';
// = ht + 'px';
// = ht * x + 'px';
// = 'scale(' + x + ')';
// = '0 0';
// = 'scale(' + x + ')';
// = '0 0';
= 'scale(' + x + ')';
= '0 0';
('mailFormData'). = clientWidth - 20 + "px";
var box = ('mailFormBox');
// = ht * x + 'px';
= clientWidth - 20 + "px";
}
这里在前端经过多次调试后，得出的；将上面的ifr修改为ifr里面嵌套的整个html，这里不是html的body，就是整个html进行缩放；另外，box的高度不用再去设置，因为我是要box固定在哪里，太高会将下面的附件挤到下方看不见；
但是这里还是有一个问题，比如说你接收到的是Twitter的邮件，这个邮件里面会有一些连接，这些连接访问是会timeout的，所以，在打开类似的邮件时，邮件内容还是保持原样并没有缩放，要等待页面中的link timeout时才会执行缩放的代码，所以这个是很不友好的；所以对于以上，再次调整代码：
var clientWidth = ;
var contentDoc = ("mailContent");
= content;
var ifr = ('mailContent');
var screenW = ;
var isLoadFlag = false;
= function () {
scaleIframeSize();
}
setTimeout(function(){
("stop");
if() {
();
} else {
('Stop'); // MSIE
}
scaleIframeSize();
}, 1500);
function scaleIframeSize() {
if (isLoadFlag) return;
isLoadFlag = true;
var ifrDocument = ;
var wd = ;
var ht = ;
var x = screenW / (wd) - 0.02;
(screenW + ":" + wd);
= wd + 'px';
= 'scale(' + x + ')';
= '0 0';
('mailFormData'). = clientWidth - 20 + "px";
var box = ('mailFormBox');
= clientWidth - 20 + "px";
}
增加一个1500ms的定时器即可，虽说有的图片可能会加载不出来，但是相比之前要和谐很多；
最后还有一个问题，因为这个是IOS上的应用，IOS的webview事由橡皮筋效果，我们在整个body是禁止了橡皮筋效果，但是添加了iframe之后，因为邮箱内容即使缩放有的内容还是很长，所以在针对有邮箱内容的时候我们还是需要可以滑动的，所以，在html代码的地方添加了样式；这样虽然是可以滑动，但是在邮箱这个界面的时候，滑动邮箱内容时出现了被禁止的橡皮筋效果，这个问题会放在下一篇文章解决；