iframe在移動端的縮放

工做中碰到個奇怪的問題，折騰了大半天，終於算是解決了，這裏把分析思路和解決辦法記錄下。

項目是作響應式的公司官網，前期的靜態圖頁面切完後就提交給後臺做爲模板使用了，我也就基本退出項目。

在後端落地時發如今在移動端頁面顯示不太對勁，顯得很模糊。第一想法是meta的頭部被覆蓋了，查看源代碼果真發現是被覆蓋了。

這是我習慣用的meta頭部，使頁面寬度根據設備寬度自適應變化

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

但是後端落地的框架是按模板直接引入的，有部分的公共資源居然也包含了設置viewport的meta。後端引入的是這個樣子的：

<meta name="viewport" id="viewport" content="width=640px, user-scalable=no">

這一頭部是被一段不得不被加入的js文件所append進入的，並且被明確告知，該js文件不能夠被修改！因此這一設置寬度爲固定640px的將我本來設置隨設備寬度變化的meta覆蓋了！

問題就來了，靜態頁面已經完成，且因爲歷史代碼因素，有至關部分的代碼在當初並無使用rem單位，已經沒法大規模修改css效果了。只有經過js重置設置viewport寬度再次進行覆蓋了......這卻是挺簡單的，無非就是代碼至關的醜陋而已。

但又一個問題來了，這個官網頁面還動態引入了iframe頁面，這些iframe頁面是固定的640px寬度。這就很崩潰了！我加了隨設備寬度變化的mata，那麼這些iframe就不能看了；我再也不次加meta，那麼官網自己就不能看了！

好在這些iframe是經過統一的方法引入，雖然不能更改引入方法的js文件，但在業務代碼中再次監聽倒也還能夠。因此再次這個綁定點擊事件，判斷iframe是否被引入後，就是使用某些特殊方法的時候了！

css3有個transform: scale()的方法，能夠對元素進行縮放，雖然真正佔位的寬高並無變化，但在顯示效果上仍是不錯的。

經過計算縮放比例 = 設備寬度 / 640 能夠得出對應的縮放比例，再對引入的iframe設置transform: scale(縮放比例)就能夠實現漂亮的縮放了！

事情到這裏就結束了嗎？不！尚未！iframe是縮放了，可高度也被縮放了，內容顯示不完整了。這裏設置height: 設備高度 / 縮放比例能夠還原本來的iframe高度。

覺得結束了？並無！還有問題存在！iframe層被scale()屬性縮放後，默認的向下和向右也移動了一段距離，這是由於scale()默認是按中心進行縮放的！這裏花了大量時間去尋找合適的方法解決，好比負margin、translate()等，可是因爲難以計算合適的移動比例係數，恕本人算法辣雞，這一方法嘗試好久終於決定仍是放棄......

翻看css手冊發現了一個熟悉又陌生的屬性

設置旋轉元素的基點位置：
transform-origin: x-axis y-axis z-axis;

它有3個屬性值，分別表明定義視圖被置於X、Y、Z軸的何處。
他鄉遇故知，久旱逢甘霖！要的就是你啊！設置transform-origin: 0 top 0 解決~

其實吧，這個屬性很早就被用到了，只不過我最開始寫的是縮寫transform-origin: 0，被瀏覽器解析以後的就是transform-origin: 0 center 0......當時的感覺就是左右解決了，一直想的都是把iframe移上去，卻不知人家自帶這樣的功能，只不過被我忽略了。學習仍是不能囫圇吞棗啊，一個屬性居然能夠浪費半天的時間，我大概不是個合格的前端......（逃