解決麥客表單iphone/ipad下寬度100%兼容性問題
麥客是我見過比較簡潔好用的表單制作工具,越來越多的企業(yè)都開始選用麥客表單作為資料收集工具。但是按照麥客表單的嵌入指引集成到移動端網頁后,表單的寬度并不是按照100%顯示。
在表單的生成環(huán)節(jié),下方會有“嵌入網站”的功能,一共有兩大分類:嵌入網頁和邊緣彈窗。兩類嵌入方法都是將指定的代碼復制后,粘貼進自己的網頁代碼相應的位置即可使用,只是具體的表現形式不同,可以根據效果自行選擇。
按照麥客文檔中提示,選用iframe代碼嵌入的方式:
iframe代碼
iframe代碼相對要簡單一點,iframe的原理簡單來說就是在網頁中畫出一個指定大小的方框,然后在方框內展示要嵌入的網頁內容。
麥客提供的iframe嵌入代碼中,嵌入表單的窗口高度是固定值,即上圖下劃線所標注的“800”(單位:像素),你可以根據自己表單的實際情況來修改這個數值。而參考代碼設置iframe的寬度為100%,預期是寬度按實際設備寬度顯示。
然而實際效果存在兼容性問題,在Android設備上顯示正常,但是在IOS設備下顯示寬度并不是按我們所想的100%滿屏顯示,而是寬度超過100%(iframe寬度(100%)沒有起作用,超出外面div,寬度為實際寬度)。
iframe 變大的原因是,頁面中元素即使已經 hidden 或者 display 為 none 了,在計算 iframe 大小時并不會忽略它們,這不知道算是IOS系統(tǒng)的優(yōu)點還是缺點。
那么既然出現問題如何去解決呢?迅優(yōu)小編把網站前端工程師的解決方法貼出來給大家分享一下:
通過上述JS處理,可以在頁面加載后重新設置iframe寬度或者高度為實際需要的寬高。希望本帖對您有幫助。
相關內容推薦
最新文章
更多>>0532-88983785 / 0532-68613670
我要定制網站