ipad webapp 左右分欄 webview的問題

標籤：

近期公司需要開發一個項目，原來做的是手機版的單頁面APP(Single Page Application)，再後來客戶回函不錯，還想要做ipad版本。

一開始，我們是考慮把我們的單頁面架構給重構，然後再給客戶做一個ipad版（基本布局就是左右分欄），但工期趕（一個月不到），而且在討論過改架構的技術難度和風險管理後，發現沒那麼簡單，如果貿貿然弄一個，以後估計會埋很多坑給Team Dev，於是採取了一個臨時的折中方法，將ipad上的介面分成左右兩個webview，左右兩邊都分別是一個單頁面來處理，兩個頁面之間的資訊通訊，可以使用url地址傳參(參數少的時候)，也可以使用localStorage共用儲存地區。

 

按照這樣的想法，改好demo之後只需分別載入兩個單獨的webapp頁面，然後把資料邏輯什麼的處理一下就好了（實際上還有一些全屏彈窗什麼的還沒解決），然而在載入的時候卻發現，單頁面APP的寬度不對。。。死活調不過來。。。載入後的頁面總是佔用768的寬度，而不是實際viewport的寬度

 

再後來，搗鼓了好一陣子之後，發現只需要在ios app的工程中將webview的scalesPageToFit屬性設定為no，同時將頁面中的meta=viewport標籤刪除後，頁面顯示就正常了（viewport的寬度正常了）。。。

 

真是個巨坑啊。。。為了適應移動端而設定的viewport結果卻是罪魁禍首。

 

另外有沒有人有其他的解決辦法，歡迎留言～

ipad webapp 左右分欄 webview的問題