首页 > 建站教程 > CSS3+HTML5 >  响应式设计meta的一些相关设置,viewport的设置正文

响应式设计meta的一些相关设置,viewport的设置

一、viewport
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    页面初始缩放比例正确,横竖版切换时自动根据当前窗口宽度重置页面缩放,但无法手动缩放页面
    其中:
        width=device-width:保证各种终端所使用的屏幕宽度都等于设备(浏览器)标准宽度
        initial-scale=1:1表示加载时始终按照原始尺寸缩放,默认为竖版等比缩放(即使横版打开也是按照竖版缩放比例,因此实际上是放大了,放大倍数为1024/768)
        maximum-scale=1:1表示无论如何最大缩放比例都是1.设置了maximum-scale=1时,user-scalable(是否缩放)属性可以省略。minimum-scale(最小缩放比例)也可以省略
<meta name="viewport" content="width=device-width,initial-scale=1">
    页面初始比例正常,可以手动缩放页面,但从竖版切换到横版时页面缩放比例不会重置

2、apple-mobile-web-app-capable
<!-- 让页面从快捷方式打开时以全屏模式运行 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
3、format-detection
<!--屏蔽iPhone下的拨号链接(iphone下长数字默认为拨号超链接)-->
<meta name="format-detection" content="telephone=no">
4、apple-touch-icon
<!--设置主屏幕图标-->
<link rel="apple-touch-icon" sizes="72x72" href="../images/icon.png" />