[iOS/Mobile Safari] 用media query時很易中的: orientation 的 scaling bug

之前有遇過，總算有解了就寫一下

[症狀]
如果viewport有設width=device-width + initial zoom=1.0  → page scale在轉完orientation後不正確的見鬼事情
而事情會在有media query有orientation時十分明顯
而且是portrait(垂直/直向)轉landscape(水平/橫向)時發生的...

Demo

[圖解]

(1) 原本的橫向...

(2) 轉一下直向

(3) 轉回橫向 - zoom level出錯了，大了很多 ( > 1.0) 囧

那麼先直後橫呢?

會變成 (2) → (3) → (2)

...也就是說從水平轉垂直是沒事的

為什麼只是和scaling有關呢?

沒media query和scaling的原版
只有scaling
只有media query
和Demo比較一下就清楚了...只有scaling就有事，沒scaling沒事 囧

補充
這個bug最見鬼的是－reload scale照出錯 (Mobile Safari把錯的viewport設定記下來+完全無視initial-scale)，要手動scale down回 1.0才正常orz

[原因?]
好像viewport在轉向那一刻鎖成直向(769px x *)+Safari選scale up而非scale down－1024/769=1.3，於是scale出錯...

Viewport是如何出錯的Demo
(照1、2、3的次序再做一次，每次檢查HTML width和Viewport width)

[解法]
1. 不設viewport meta tag: media query的width和height會可能失敗-預設viewport是980x* [Apple文件]
2. 禁止user-scaling: user-scalable=no
3. 設一個scaling上限: maximum-scale=1