网上解释
手机浏览器是把页面放在一个虚拟的“窗口”(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进行查看。