解決麥客表單iphone/ipad下寬度100%兼容性問題

　　麥客是我見過比較簡潔好用的表單制作工具，越來越多的企業(yè)都開始選用麥客表單作為資料收集工具。但是按照麥客表單的嵌入指引集成到移動端網(wǎng)頁后，表單的寬度并不是按照100%顯示。

　　在表單的生成環(huán)節(jié)，下方會有“嵌入網(wǎng)站”的功能，一共有兩大分類：嵌入網(wǎng)頁和邊緣彈窗。兩類嵌入方法都是將指定的代碼復(fù)制后，粘貼進(jìn)自己的網(wǎng)頁代碼相應(yīng)的位置即可使用，只是具體的表現(xiàn)形式不同，可以根據(jù)效果自行選擇。
　　按照麥客文檔中提示，選用iframe代碼嵌入的方式：

iframe代碼

iframe代碼相對要簡單一點，iframe的原理簡單來說就是在網(wǎng)頁中畫出一個指定大小的方框，然后在方框內(nèi)展示要嵌入的網(wǎng)頁內(nèi)容。

麥客提供的iframe嵌入代碼中，嵌入表單的窗口高度是固定值，即上圖下劃線所標(biāo)注的“800”（單位：像素），你可以根據(jù)自己表單的實際情況來修改這個數(shù)值。而參考代碼設(shè)置iframe的寬度為100%，預(yù)期是寬度按實際設(shè)備寬度顯示。
然而實際效果存在兼容性問題，在Android設(shè)備上顯示正常，但是在IOS設(shè)備下顯示寬度并不是按我們所想的100%滿屏顯示，而是寬度超過100%（iframe寬度（100%）沒有起作用，超出外面div，寬度為實際寬度）。
iframe 變大的原因是，頁面中元素即使已經(jīng) hidden 或者 display 為 none 了，在計算 iframe 大小時并不會忽略它們，這不知道算是IOS系統(tǒng)的優(yōu)點還是缺點。
那么既然出現(xiàn)問題如何去解決呢？迅優(yōu)小編把網(wǎng)站前端工程師的解決方法貼出來給大家分享一下：

通過上述JS處理，可以在頁面加載后重新設(shè)置iframe寬度或者高度為實際需要的寬高。希望本帖對您有幫助。