HTML中head头结构

2020-04-16 21:25:41易采站长站整理

 

而如果你的网站不是响应式的,请不要使用initial-scale或者禁用缩放。
<meta name="viewport" content="width=device-width,user-scalable=yes">

 相关链接:非响应式设计的viewport

ios 设备

添加到主屏后的标题(iOS 6 新增)

复制代码
<meta name=”apple-mobile-web-app-title” content=”标题”> <!– 添加到主屏后的标题(iOS 6 新增) –>

 是否启用 WebApp 全屏模式

复制代码
<meta name=”apple-mobile-web-app-capable” content=”yes” /> <!– 是否启用 WebApp 全屏模式 –>

 设置状态栏的背景颜色

复制代码
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” /> <!– 设置状态栏的背景颜色,只有在 `”apple-mobile-web-app-capable” content=”yes”` 时生效 –>

 只有在 "apple-mobile-web-app-capable" content="yes" 时生效

content 参数:
 •default 默认值。
 •black 状态栏背景是黑色。
 •black-translucent 状态栏背景是黑色半透明。
 如果设置为 default 或 black ,网页内容从状态栏底部开始。
 如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。
 
禁止数字识自动别为电话号码
<meta name="format-detection" content="telephone=no" /> <!– 禁止数字识自动别为电话号码 –>

 iOS 图标

rel 参数:
 apple-touch-icon 图片自动处理成圆角和高光等效果。
 apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图。
 iPhone 和 iTouch,默认 57×57 像素,必须有
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57×57-precomposed.png" /> <!– iPhone 和 iTouch,默认 57×57 像素,必须有 –>

 iPad,72×72 像素,可以没有,但推荐有
<link rel="apple-touch-icon-precomposed" sizes="72×72" href="/apple-touch-icon-72×72-precomposed.png" /> <!– iPad,72×72 像素,可以没有,但推荐有 –>

 Retina iPhone 和 Retina iTouch,114×114 像素,可以没有,但推荐有
<link rel="apple-touch-icon-precomposed" sizes="114×114" href="/apple-touch-icon-114×114-precomposed.png" /> <!– Retina iPhone 和 Retina iTouch,114×114 像素,可以没有,但推荐有 –>

 Retina iPad,144×144 像素,可以没有,但推荐有
<link rel="apple-touch-icon-precomposed" sizes="144×144" href="/apple-touch-icon-144×144-precomposed.png" /> <!– Retina iPad,144×144 像素,可以没有,但推荐有 –>