記得填好 html meta data 和之前踏過 mobile browser 的雷

雜亂記一下前陣子寫網頁的心得。

之前試了 "margin: auto;" 要做置中效果, 結果在 IE 9 無效, 看到 Margin auto doesn't work in IE? 才知道是忘了填 doctype

另外 一次Ajax查错的经历 提到沒填 http header 沒返回 charset=utf-8, 造成 AJAX 在 IE 上的錯誤。一些 meta data 記得要填好, 避免遇到神奇難解的錯。

順便記一下以前遇到其它的雷:

• Chrome on mobile 預設 viewport 用 980 來 render 網頁, 若最小頁寬為 1024 會看到畫面 render 後稍微超出畫面, 然後自動縮回螢幕寬, 但是右側邊緣畫面就破了, 最後只好改用 980 為最小頁寬
• Safari on mobile 不支援 1x1 的 png, 半透明效果會不對, 改用 2x2 就好了, 若不是看到 iphone - Alpha transparent PNGs not displaying correctly in Mobile Safari, 我怎麼也不會想到要這樣解 ...

以前作網站要跨 IE 6, 7, 8 很痛苦, 現在作網站少了 IE 6, 7 的困擾, 但多了 mobile browser 的困擾。只有長期做這行的人, 才知道其中的心酸吧。不過現在 Chrome on mobile 和 Safari on mobile (iOS 6) 都有提供搭配桌機 Chrome/Safari 使用 web inspector, 應該會輕鬆一些, 我還沒試用過就是了。