資訊專欄INFORMATION COLUMN
摘要：在后端落地時發現在在移動端頁面顯示不太對勁，顯得很模糊。但又一個問題來了，這個官網頁面還動態引入了頁面，這些頁面是固定的寬度。這里設置設備高度縮放比例可以還原原本的高度。
工作中碰到個奇怪的問題，折騰了大半天，終于算是解決了，這里把分析思路和解決辦法記錄下。
項目是做響應式的公司官網，前期的靜態圖頁面切完后就提交給后臺作為模板使用了，我也就基本退出項目。
在后端落地時發現在在移動端頁面顯示不太對勁，顯得很模糊。第一想法是meta的頭部被覆蓋了，查看源代碼果然發現是被覆蓋了。
這是我習慣用的meta頭部，使頁面寬度根據設備寬度自適應變化
可是后端落地的框架是按模板直接引入的，有部分的公共資源竟然也包含了設置viewport的meta。后端引入的是這個樣子的：
這一頭部是被一段不得不被加入的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移上去，殊不知人家自帶這樣的功能，只不過被我忽略了。學習還是不能囫圇吞棗啊，一個屬性竟然可以浪費半天的時間，我大概不是個合格的前端......（逃
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1716.html
摘要：不推薦移動端瀏覽器前端優化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展 開車...
摘要：不推薦移動端瀏覽器前端優化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展 開車...
摘要：不推薦移動端瀏覽器前端優化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展 開車...
閱讀 1402·2021-10-11 10:59
閱讀 3103·2019-08-30 15:54
閱讀 2724·2019-08-30 13:19
閱讀 2455·2019-08-30 13:02
閱讀 2371·2019-08-30 10:57
閱讀 3346·2019-08-29 15:40
閱讀 980·2019-08-29 15:39
閱讀 2299·2019-08-29 12:40
