解決麥客表單iphone/ipad下寬度100%兼容性問(wèn)題

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

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

iframe代碼

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

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

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