html5中viewport与meta详解

时间:2022-05-07 14:43:44

网上解释
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

属性详解:

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放(一定要禁止)

2、禁止将数字变为电话号码(必须取消这个):

<meta name="format-detection" content="telephone=no" />

作用:一般情况下,IOS和Android系统都会默认某长度内的数字为电话号码,并且点击这个数字还会自动拨号!即使不加也是会默认显示为电话的。如果是要开启的效果,这个meta就不用写了,默认开启的。

3、iphone设备中的safari私有meta标签:

<meta name="apple-mobile-web-app-capable" content="yes" />

作用:允许全屏模式浏览,删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

4、iphone的私有标签:

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />

作用:指定iphone中顶端的状态栏显示样式。默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)

5、创建桌面图标和启动画面,指定它的值可以使得你的网页在保存至主屏时,其图标显示为自定义的icon,而不是网页的缩略图

<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

文件名设置为 apple-touch-icon 或 apple-touch-icon-precomposed ,前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层,后者则不会添加这些效果。

6、给网页声明启动画面,类似原生app。但是被声明的图片对于iphone和itouch 大小只能是 320 x 460 ,其他大小的都无效。但是可以通过sizes 来进行多设备适配。

<link rel="apple-touch-startup-image" href="/startup.png">
//for iphone Retina Display high
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
//for iPad Landscape
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
//for iPad Portrait
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

调试:

在浏览器调试+真机测试,

火狐的测试工具:按shift+ctrl+M进行查看。