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; }
以上三种方法可同时使用,各有其防止画面被强制放大的效果。