工作上碰到個奇怪的問題，折騰了大半天，終於算是解決了，這裡把分析思路和解決方法記錄下來。
專案是做響應式的公司官網，前期的靜態圖頁面切完後就提交給後台作為模板使用了，我也就基本退出專案。
在後端落地時發現在行動端頁面顯示不太對勁，顯得很模糊。第一想法是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移上去，殊不知人家自帶這樣的功能，只不過被我忽略了。學習還是不能囫圇吞棗啊，一個屬性竟然可以浪費半天的時間，我大概不是個合格的前端......（逃
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。