欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

iframe在移動端的縮放的示例代碼

  發(fā)布時間:2018-10-12 15:36:10   作者:dulmcat   我要評論
這篇文章主要介紹了iframe在移動端的縮放的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

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

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

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

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

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

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

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

這一頭部是被一段不得不被加入的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>

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

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

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

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

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

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

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

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

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

他鄉(xiāng)遇故知,久旱逢甘霖!要的就是你?。≡O(shè)置transform-origin: 0 top 0 解決~

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

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • HTML5中的Microdata與歷史記錄管理詳解

    Microdata作為HTML5新增的一個特性,它允許開發(fā)者在HTML文檔中添加更多的語義信息,以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容,本文將探討HTML5中Microdata的使用方法以及
    2025-04-21
  • HTML5表格語法格式詳解

    在HTML語法中,表格主要通過< table >、< tr >和< td >3個標(biāo)簽構(gòu)成,本文通過實例代碼講解HTML5表格語法格式,感興趣的朋友一起看看吧
    2025-04-21
  • html5的響應(yīng)式布局的方法示例詳解

    這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進(jìn)行響應(yīng)式布局的方法,簡要介紹了CSS Grid布局的基礎(chǔ)知識和如何實現(xiàn)自動換行的網(wǎng)格布局,感興趣的朋友一起看看吧
    2025-04-21
  • 基于Canvas的Html5多時區(qū)動態(tài)時鐘實戰(zhàn)代碼

    本文介紹了如何使用Canvas在HTML5上實現(xiàn)一個多時區(qū)動態(tài)時鐘的web展示,通過Canvas的API,可以繪制出6個不同城市的時鐘,并且這些時鐘可以動態(tài)轉(zhuǎn)動,每個時鐘上都會標(biāo)注出對應(yīng)的
    2025-03-11
  • HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼

    HTML5的自定義數(shù)據(jù)屬性(data-*)提供了一種標(biāo)準(zhǔn)化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事
    2025-03-11
  • HTML5中下拉框<select>標(biāo)簽的屬性和樣式詳解

    在HTML5中,下拉框(<select>標(biāo)簽)作為表單的重要組成部分,為用戶提供了一個從預(yù)定義選項中選擇值的方式,本文將深入探討<select>標(biāo)簽的屬性、樣式,并重點介
    2025-02-27
  • HTML5 Input 日期選擇器詳解

    本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時間、日期+時間、本地日期時間等不同類型的日期選擇器,感興趣的朋友一起看
    2025-02-17
  • HTML5超鏈接和圖片基礎(chǔ)用法詳解

    本文介紹了HTML5中的超鏈接、相對路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個文檔或頁面內(nèi)部書簽的鏈接,相對路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁面,圖片標(biāo)簽用于引入外部圖
    2025-02-17
  • HTML5超鏈接的創(chuàng)建方法

    本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點鏈接的使用,還討論了超鏈接的四種不同狀態(tài)(link、visited、hover、active)的CSS樣
    2025-02-17
  • HTML5使用details標(biāo)簽:展開/收縮信息

    最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標(biāo)簽的妙用,這個不用js即可實現(xiàn)展開/收縮信息,很方便用來讓用戶先才答案,然后下面點擊再給出答案的效果,這里就為大家簡單介紹一下,
    2024-11-03

最新評論