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

　　麥客是(shì)我見過比較簡潔好用的(de)表單制作工具，越來(lái)越多的(de)企業都開始選用麥客表單作爲(wéi / wèi)資料收集工具。但是(shì)按照麥客表單的(de)嵌入指引集成到(dào)移動端網頁後，表單的(de)寬度并不(bù)是(shì)按照100%顯示。

　　在(zài)表單的(de)生成環節，下方會有“嵌入網站”的(de)功能，一(yī / yì ／yí)共有兩大(dà)分類：嵌入網頁和(hé / huò)邊緣彈窗。兩類嵌入方法都是(shì)将指定的(de)代碼複制後，粘貼進自己的(de)網頁代碼相應的(de)位置即可使用，隻是(shì)具體的(de)表現形式不(bù)同，可以(yǐ)根據效果自行選擇。
　　按照麥客文檔中提示，選用iframe代碼嵌入的(de)方式：

iframe代碼

iframe代碼相對要(yào / yāo)簡單一(yī / yì ／yí)點，iframe的(de)原理簡單來(lái)說(shuō)就(jiù)是(shì)在(zài)網頁中畫出(chū)一(yī / yì ／yí)個(gè)指定大(dà)小的(de)方框，然後在(zài)方框内展示要(yào / yāo)嵌入的(de)網頁内容。

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

通過上(shàng)述JS處理，可以(yǐ)在(zài)頁面加載後重新設置iframe寬度或者高度爲(wéi / wèi)實際需要(yào / yāo)的(de)寬高。希望本帖對您有幫助。