responsive類的RWD網頁通常看起來非常舒服,但是有時候瀏覽器會【不自覺】的讓網頁突然放大,造成頁面偏離的現象。
要避免這個問題,常用的解決有三種:
A.使用meta tag 限制畫面縮放:
在和的標籤之間輸入下列文字:
而在meta tag中viewport還有以下幾種屬性可以進行細部設定:
width:數字,或設定為 device-width
height:數字,或設定為 device-height
initial-scale:數字,首次進入頁面的初始比例,最小 0.25,最大 5
minimum-scale:數字,允許最小縮小比例,最小 0.25,最大 5
maximum-scale:數字,允許最大放大比例,最小 0.25,最大 5
user-scalable:數字或yes,no,允許使用者縮放,1:允許 or 0:禁止 (yes or no)
B. 使用CSS限制輸入框輸入時,畫面放大問題:
input, textarea {
font-size: initial;
}
C. 使用CSS限制畫面被強制縮放:
html, body { -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; }
以上三種方法可同時使用,各有其防止畫面被強制放大的效果。