解决HTML5 scale缩放空白问题

谁借莪１个温暖的怀抱￠ 2022-05-03 10:30 647阅读 0赞

现有IOS应用，邮箱功能需要预览邮箱内容，但是邮箱内容都是有固定高宽，也就是这个页面实际上是在PC上显示，

所以现在，在APP上预览时就出现内容过宽，过长；导致APP页面被拉伸变的很丑；

html中使用的iframe嵌套的邮箱内容；网上都说IOS上使用iframe有诸多问题，实际上我并没有发现像网友说的那么不堪；

使用iframe嵌套网页后，使用scale进行缩放会存在，下端空白问题。

现在说一下解决方案，直接贴代码：

HTML代码：

<div id="mailFormData" style="height: 100%;overflow-x: hidden;overflow-y: auto;">  /*overflow-y: auto;*/
        <div id="mailFormBox" style="max-height:400px;overflow-x: hidden;overflow-y: scroll;-webkit-overflow-scrolling:touch;"> /*overflow-x: hidden;overflow-y: auto;*/
            <iframe id="mailContent" frameborder="0" style="margin-left: -11px; width: 100%;"></iframe> 
        </div> 
    </div>

原JS代码：

var clientWidth = document.body.clientWidth;
                console.info("clientWidth:" + clientWidth);
                var contentDoc = document.getElementById("mailContent");
                contentDoc.srcdoc = content;
                let ifr = document.getElementById('mailContent');
                ifr.onload = function () {
                    let wd = ifr.contentWindow.document.documentElement.scrollWidth;
                    let ht = ifr.contentWindow.document.documentElement.scrollHeight;
                    let x = document.getElementById('mailContent').clientWidth / wd;
                    ifr.style.width = wd + 'px';
                    ifr.style.height = ht + 'px';
                    ifr.style.transform = `scale(${x})`;
                    ifr.style.transformOrigin = '0 0';
    
                    document.getElementById('mailFormData').style.width = clientWidth - 20 + "px";
                    let box = document.getElementById('mailFormBox');
                    box.style.height = ht * x + 'px'
                    box.style.width = clientWidth - 20 + "px";
                }

这样处理的代码只是宽度变了而已，缩放了，但是就出现了上面说的空白，因为这个网页内容很长；所以缩放后实际高度是没有变的

处理后的代码：

var clientWidth = document.body.clientWidth;
                console.info("clientWidth:" + clientWidth);
                var contentDoc = document.getElementById("mailContent");
                contentDoc.srcdoc = content;
                var ifr = document.getElementById('mailContent');
                var screenW = window.screen.availWidth;
                ifr.onload = function () {
                    var ifrDocument = ifr.contentDocument;
                    var wd = ifrDocument.documentElement.scrollWidth;
                    var ht = ifrDocument.documentElement.scrollHeight;
                    var x = screenW / wd - 0.02;
                    console.info(screenW + ":" + wd);
                    ifr.style.width = wd + 'px';
                    //ifr.style.height = ht + 'px';
                    //ifr.contentWindow.scrollMaxY = ht * x + 'px';
                    //ifr.style.transform = 'scale(' + x + ')';
                    //ifr.style.transformOrigin = '0 0';
                    //ifrDocument.body.style.transform = 'scale(' + x + ')';
                    //ifrDocument.body.style.transformOrigin = '0 0';
                    ifr.contentWindow.document.documentElement.style.transform = 'scale(' + x + ')';
                    ifr.contentWindow.document.documentElement.style.transformOrigin = '0 0';
    
    
                    document.getElementById('mailFormData').style.width = clientWidth - 20 + "px";
                    var box = document.getElementById('mailFormBox');
                    //box.style.height = ht * x + 'px';
                    box.style.width = clientWidth - 20 + "px";
                }

这里在前端经过多次调试后，得出的；将上面的ifr修改为ifr里面嵌套的整个html，这里不是html的body，就是整个html进行缩放；另外，box的高度不用再去设置，因为我是要box固定在哪里，太高会将下面的附件挤到下方看不见；

但是这里还是有一个问题，比如说你接收到的是Twitter的邮件，这个邮件里面会有一些连接，这些连接访问是会timeout的，所以，在打开类似的邮件时，邮件内容还是保持原样并没有缩放，要等待页面中的link timeout时才会执行缩放的代码，所以这个是很不友好的；所以对于以上，再次调整代码：

增加一个1500ms的定时器即可，虽说有的图片可能会加载不出来，但是相比之前要和谐很多；

最后还有一个问题，因为这个是IOS上的应用，IOS的webview事由橡皮筋效果，我们在整个body是禁止了橡皮筋效果，但是添加了iframe之后，因为邮箱内容即使缩放有的内容还是很长，所以在针对有邮箱内容的时候我们还是需要可以滑动的，所以，在html代码的地方添加了样式；这样虽然是可以滑动，但是在邮箱这个界面的时候，滑动邮箱内容时出现了被禁止的橡皮筋效果，这个问题会放在下一篇文章解决；