1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 手機網頁
  6. »
  7. 手機網頁教學-解決iPad Safari瀏覽器寬度100%問題

手機網頁教學-解決iPad Safari瀏覽器寬度100%問題

2011/07/11

梅問題-手機網頁-ipad safari瀏覽器寬度百分百

  最近有在收看梅問題的朋友,應該有發現到,梅問題教學網作了點小改版,讓區塊變的更明顯,同時文章中版塊也變得更清爽,而目前螢幕的解析度都提升外,現在軟體的視窗也愈作愈大,先前的版塊已不符使用,也讓梅干花了點時間作了點修正,但若各位有使用iPad來瀏覽梅問題時,應該會發現到底圖的部分,到右邊就斷掉了,而在電腦中卻是正常的,這也讓梅干感到相當弔詭,明明寬度已設100%,卻不會自動充滿整個畫面,上星期梅干就花了時間,找到了解決辦法,讓iPad中的Safari也可實現寬度充滿整個畫面夢想。


Step1
只要將下面的code 加到<head>~</head>之間,而width的部分依照,版型中的最大寬度再加200像素左右。

<meta name="viewport" content="width=1200" />

梅問題-手機網頁-ipad safari瀏覽器寬度百分百


Step2
儲存並上傳就大功告成啦!
梅問題-手機網頁-ipad safari瀏覽器寬度百分百


  由於在iPad中的Safari並不支持虛擬寬度,需給一個實體的寬度值,所以這一個實體值要加在head之間,且寬度的部分得依照版面中,最大寬度再加個200左右,就可讓底圖充滿整個畫面,這方法是梅干試過最簡單的方法,且也解決了當前的問題啦~