在head标签中加入以上meta声明。具体属性可以谷歌/百度。
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no"/>
我查了下viewport，有几个属性：
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
Apple发明了viewport的meta标签，例如：
<meta name="viewport"
content="width=320, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0">
其中width表示网页的布局layout宽度。
initial-scale表示初始时的缩放比例，
minimum-scale和maximum-scale分别表示最小和最大缩放比例。
这样，上面这个meta就表示布局宽度320像素，初始缩放为1倍（即不缩放），且禁止用户缩放（因为最大最小缩放都为1倍）——一个专为iPhone优化的网页通常就会用这样的设置。
如果你是针对960设计的，那么可以用这样一个meta：
<meta name="viewport" content="width=960,
initial-scale=0.33">
这表示布局宽度为960像素，初始缩放为0.33，也就是，会缩小到大约1/3，这样正好可以在320像素的宽度里看到整个网页。你也可以不设initial-scale，因为手机浏览器大多默认会初始缩放到可容纳整个网页宽度。
也可以是关键字device-width 表示采用设备宽度。
IPhone手机页面中点击文本输入框，弹出键盘，网页会放大,如何解决,布布扣,bubuko.com
时间： 2024-12-25 09:14:30