Iframe在IOS使用Bootstrap失效
這是我將一個資料維護的網頁版面改成RWD時遇到的問題，在Android的手機上和桌機上看的網頁明明都有隨著螢幕大小做調整，為何在IOS的系統上看RWD的效果卻跑不出來，以下是我做的測試截圖及最後查了好幾天的資料才找到解決的方法：
這個是內部職員使用的資訊系統，要改版的網頁是整個資訊系統內其中一個子系統，系統內的網頁導覽列應該要是把表題內縮到圖中右上角的按鈕內，資料表格當欄位過多時(資料表格有14欄)可以往右滑動，不會因為超出螢幕的欄位而讓資料很難觀看或頁面很亂。
Ipad mini 4-IOS瀏覽器
實機測試我用的是平板Ipad mini 4，當網頁使用IOS的Safrai瀏覽器觀看時，導覽列應該出現的三欄式按鈕不見了，而導覽列標題沒有內縮到三欄式按鈕內。表格超出螢幕範圍頁面並沒有照著螢幕大小做調整。
Ipad mini 4-IOS瀏覽器
一開始我認為是導覽列的斷點失效，但在Chrome用模擬器查看Ipad mini 4的尺寸發現導覽列可以依尺寸做調整，那問題就不在導覽列上了。因此，我推測有可能是表格的欄位欄位長度造成，原本14欄的表格，先做註解剩3欄，果然導覽列能調整成三列式的按鈕，但頁面還是沒有調整至螢幕能觀看的最好狀態，那問題就應該是在表格上面了，但為什麽會造成這樣的狀況?
Chrome模擬器寬度(756px)
我又用jquery印出桌機和Ipad mini 4螢幕的寬度，發現和桌機21吋的螢幕印出來的數值竟然差不多，平板也才7吋大而已，這是一件很奇怪的事，而當我把網頁移出資訊系統的Iframe框架外用Ipad mini 4單獨看發現斷點並沒有失效，所有的功能都能正常運作，那就可以推斷是資訊系統的框架和RWD的CSS可能在IOS系統下會有不支援的情況。
桌機寬度(1641px)
Ipad mini 4寬度(1672px)
Iframe在IOS 11就存在這個問題，有些RWD的頁面在Iframe內有溢出的現象。而且無法從設定Iframe去解決，要解決這個問題就要從內部著手了，也就是RWD的頁面去做調整，在CSS body設定寬度的優先權避免表格溢出的問題，解決方法：
body {
max-width: 100vw !important;
}
!important; 設定優先等級
成功畫面
參考網址：
留言
張貼留言