今天就跟大家聊聊有關(guān)使用iframe怎么實(shí)現(xiàn)一個(gè)移動(dòng)端縮放效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)、做網(wǎng)站、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出萬(wàn)安免費(fèi)做網(wǎng)站回饋大家。

這是我習(xí)慣用的meta頭部，使頁(yè)面寬度根據(jù)設(shè)備寬度自適應(yīng)變化

可是后端落地的框架是按模板直接引入的，有部分的公共資源竟然也包含了設(shè)置viewport的meta。后端引入的是這個(gè)樣子的：

這一頭部是被一段不得不被加入的js文件所append進(jìn)入的，而且被明確告知，該js文件不可以被修改！所以這一設(shè)置寬度為固定640px的將我原本設(shè)置隨設(shè)備寬度變化的meta覆蓋了！

問(wèn)題就來(lái)了，靜態(tài)頁(yè)面已經(jīng)完成，且由于歷史代碼因素，有相當(dāng)部分的代碼在當(dāng)初并沒(méi)有使用rem單位，已經(jīng)無(wú)法大規(guī)模修改css效果了。只有通過(guò)js重置設(shè)置viewport寬度再次進(jìn)行覆蓋了......這倒是挺簡(jiǎn)單的，無(wú)非就是代碼相當(dāng)?shù)某舐选?/p>

但又一個(gè)問(wèn)題來(lái)了，這個(gè)官網(wǎng)頁(yè)面還動(dòng)態(tài)引入了iframe頁(yè)面，這些iframe頁(yè)面是固定的640px寬度。這就很崩潰了！我加了隨設(shè)備寬度變化的mata，那么這些iframe就不能看了；我不再次加meta，那么官網(wǎng)本身就不能看了！

好在這些iframe是通過(guò)統(tǒng)一的方法引入，雖然不能更改引入方法的js文件，但在業(yè)務(wù)代碼中再次監(jiān)聽(tīng)倒也還可以。所以再次這個(gè)綁定點(diǎn)擊事件，判斷iframe是否被引入后，就是使用某些特殊方法的時(shí)候了！

css3有個(gè)transform: scale()的方法，可以對(duì)元素進(jìn)行縮放，雖然真正占位的寬高并沒(méi)有變化，但在顯示效果上還是不錯(cuò)的。

通過(guò)計(jì)算縮放比例 = 設(shè)備寬度 / 640可以得出對(duì)應(yīng)的縮放比例，再對(duì)引入的iframe設(shè)置transform: scale(縮放比例)就可以實(shí)現(xiàn)漂亮的縮放了！

事情到這里就結(jié)束了嗎？不！還沒(méi)有！iframe是縮放了，可高度也被縮放了，內(nèi)容顯示不完整了。這里設(shè)置height: 設(shè)備高度 / 縮放比例可以還原原本的iframe高度。

以為結(jié)束了？并沒(méi)有！還有問(wèn)題存在！iframe層被scale()屬性縮放后，默認(rèn)的向下和向右也移動(dòng)了一段距離，這是因?yàn)?code>scale()默認(rèn)是按中心進(jìn)行縮放的！這里花了大量時(shí)間去尋找合適的方法解決，比如負(fù)margin、translate()等，但是由于難以計(jì)算合適的移動(dòng)比例系數(shù)，恕本人算法辣雞，這一方法嘗試很久終于決定還是放棄......

翻看css手冊(cè)發(fā)現(xiàn)了一個(gè)熟悉又陌生的屬性
設(shè)置旋轉(zhuǎn)元素的基點(diǎn)位置：

transform-origin: x-axis y-axis z-axis;

它有3個(gè)屬性值，分別代表定義視圖被置于X、Y、Z軸的何處。

看完上述內(nèi)容，你們對(duì)使用iframe怎么實(shí)現(xiàn)一個(gè)移動(dòng)端縮放效果有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

分享題目：使用iframe怎么實(shí)現(xiàn)一個(gè)移動(dòng)端縮放效果-創(chuàng)新互聯(lián)
新聞來(lái)源：http://weahome.cn/article/diippj.html