成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

iframe在移動(dòng)端的縮放

littleGrow / 2526人閱讀

摘要：在后端落地時(shí)發(fā)現(xiàn)在在移動(dòng)端頁面顯示不太對勁，顯得很模糊。但又一個(gè)問題來了，這個(gè)官網(wǎng)頁面還動(dòng)態(tài)引入了頁面，這些頁面是固定的寬度。這里設(shè)置設(shè)備高度縮放比例可以還原原本的高度。

工作中碰到個(gè)奇怪的問題，折騰了大半天，終于算是解決了，這里把分析思路和解決辦法記錄下。

項(xiàng)目是做響應(yīng)式的公司官網(wǎng)，前期的靜態(tài)圖頁面切完后就提交給后臺(tái)作為模板使用了，我也就基本退出項(xiàng)目。

在后端落地時(shí)發(fā)現(xiàn)在在移動(dòng)端頁面顯示不太對勁，顯得很模糊。第一想法是meta的頭部被覆蓋了，查看源代碼果然發(fā)現(xiàn)是被覆蓋了。

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

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

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

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

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

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

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

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

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

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

翻看css手冊發(fā)現(xiàn)了一個(gè)熟悉又陌生的屬性

設(shè)置旋轉(zhuǎn)元素的基點(diǎn)位置：
transform-origin: x-axis y-axis z-axis;

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

其實(shí)吧，這個(gè)屬性很早就被用到了，只不過我最開始寫的是縮寫transform-origin: 0，被瀏覽器解析之后的就是transform-origin: 0 center 0......當(dāng)時(shí)的感受就是左右解決了，一直想的都是把iframe移上去，殊不知人家自帶這樣的功能，只不過被我忽略了。學(xué)習(xí)還是不能囫圇吞棗啊，一個(gè)屬性竟然可以浪費(fèi)半天的時(shí)間，我大概不是個(gè)合格的前端......（逃

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1716.html

相關(guān)文章

  • 這么多前端優(yōu)化點(diǎn)你都記得住嗎？

    摘要：不推薦移動(dòng)端瀏覽器前端優(yōu)化策略相對于桌面端瀏覽器，移動(dòng)端瀏覽器上有一些較為明顯的特點(diǎn)設(shè)備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應(yīng)用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動(dòng)端瀏覽器的優(yōu)化策略進(jìn)行羅列注意，是羅列不是展開，遇到不會(huì)不懂的點(diǎn)還請站外擴(kuò)展 開車...

    ysl_unh 評論0 收藏0

  • 這么多前端優(yōu)化點(diǎn)你都記得住嗎？

    摘要：不推薦移動(dòng)端瀏覽器前端優(yōu)化策略相對于桌面端瀏覽器，移動(dòng)端瀏覽器上有一些較為明顯的特點(diǎn)設(shè)備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應(yīng)用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動(dòng)端瀏覽器的優(yōu)化策略進(jìn)行羅列注意，是羅列不是展開，遇到不會(huì)不懂的點(diǎn)還請站外擴(kuò)展 開車...

    Tecode 評論0 收藏0

  • 這么多前端優(yōu)化點(diǎn)你都記得住嗎？

    摘要：不推薦移動(dòng)端瀏覽器前端優(yōu)化策略相對于桌面端瀏覽器，移動(dòng)端瀏覽器上有一些較為明顯的特點(diǎn)設(shè)備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應(yīng)用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動(dòng)端瀏覽器的優(yōu)化策略進(jìn)行羅列注意，是羅列不是展開，遇到不會(huì)不懂的點(diǎn)還請站外擴(kuò)展 開車...

    Tonny 評論0 收藏0

  • web前端知識(shí)點(diǎn)1

    摘要：特點(diǎn)宋體是無連接無連接的含義是限制每次連接只處理一個(gè)請求。宋體是媒體獨(dú)立的只要客戶端和服務(wù)器知道如何處理的數(shù)據(jù)內(nèi)容，宋體任何類型的數(shù)據(jù)都可以通過發(fā)送。宋體服務(wù)端響應(yīng)消息狀態(tài)行消息報(bào)頭空行和響應(yīng)正文。1. input屬于窗體元素,層級(jí)顯示比flash、其它元素都高。請判斷這句話的正確與否。?錯(cuò)誤 層級(jí)顯示優(yōu)先級(jí)： frameset > 表單元素 > 非表單元素 在html中，幀元素（frame...

    wapeyang 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<