移动端meta行的汇总
<meta name=viewport
content=width=device-width, initial-scale=1, user-scalable=no, minimal-ui />
width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 )
height: viewport 的高度 (范围从 223 到 10,000 )
initial-scale: 初始的缩放比例 (范围从>0到 10 )
minimum-scale: 允许用户缩放到的最小比例
maximum-scale: 允许用户缩放到的最大比例
user-scalable: 用户是否可以手动缩放
<!– 是否删除默认的苹果工具栏和菜单栏 –>
<meta name=apple-mobile-web-app-capable content=yes />
<!– 启用360浏览器的极速模式(webkit) –>
<meta name=renderer content=webkit>
<!– 避免IE使用兼容模式 –>
<meta http-equiv=X-UA-Compatible content=IE=edge>
<!– 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 –>
<meta name=HandheldFriendly content=true>
<!– 微软的老式浏览器 –>
<meta name=MobileOptimized content=320>
<!– uc强制竖屏 –>
<meta name=screen-orientation content=portrait>
<!– QQ强制竖屏 –>
<meta name=x5-orientation content=portrait>
<!– UC强制全屏 –>
<meta name=full-screen content=yes>
<!– QQ强制全屏 –>
<meta name=x5-fullscreen content=true>
<!– UC应用模式 –>
<meta name=browsermode content=application>
<!– QQ应用模式 –>
<meta name=x5-page-mode content=app>
<!– windows phone 点击无高光 –>
<meta name=msapplication-tap-highlight content=no>
1. apple-touch-icon
< link rel= apple-touch-icon sizes= 76×76 href= touch-icon-ipad.png>
如果 apple-mobile-web-app-capable 设置为 yes 了,
那么在苹果机的safari上可以通过添加到主屏按钮将网站添加到主屏幕上。
而设置相应 apple-touch-icon 标签,则添加到主屏上的图标就会使用我们指定的图片。
2. apple-touch-startup-image
< link rel= apple-touch-startup-image href= /startup.png>
基于 apple-mobile-web-app-capable 设置为 yes ,
可以为WebApp设置一个类似NativeApp的启动画面。
和 apple-touch-icon 不同,
apple-mobile-web-app-capable 不支持sizes属性,
要使用media来加载不同的启动画面。
// iPhone <link href=apple-touch-startup-image-320x460.png media=(device-width: 320px) rel=apple-touch-startup-image />
// iPhone Retina
<link href=apple-touch-startup-image-640x920.png media=(device-width: 320px) and (-webkit-device-pixel-ratio: 2)
rel=apple-touch-startup-image />
以上就是移动端meta行的汇总的详细内容,更多请关注双恒网络其它相关文章!