手持设备通用meta

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

    用于设定是否将网页内容中的手机号码显示为拨号的超链接,iPhone上默认为yes;

  • <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    • width,viewport的宽度;

    • height,viewport的高度;

    • initial-scale,初始的缩放比例;

    • minimum-scale,允许用户缩放到的最小比例;

    • maximum-scale,允许用户缩放到的最大比例;

    • user-scalable,用户是否可以手动缩放;

IOS设备对meta定义的私有属性

在iOS中有两个meta值,apple-mobile-web-app-capableapple-mobile-web-app-status-bar-style,这两个会让网页内容以应用程序风格显示,并使状态栏透明。

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

  • <meta name="apple-mobile-web-app-status-bar-style" content="black" />

两个都设置则网站开启对web app程序的支持,外界通称该应用为“离线APP”;

该meta可以看出内容为“苹果设备web应用程序”,就是说该meta是专门定义web应用的;

apple-mobile-web-app-status-bar-stylecontent默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。

注意: 若值为”black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度iphone4和itouch4的Retina屏幕为40px)

  • <meta name="apple-mobile-web-app-status-bar-style" content="default" />显示效果如下:

    alt content=default

  • <meta name="apple-mobile-web-app-status-bar-style" content="black" />显示效果如下:

    alt content=black

  • <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />显示效果如下:

    alt content=black-translucent

  • <meta name="apple-touch-fullscreen" content="yes" />

    如果把一个web app添加到了主屏幕中,那么从主屏幕中打开这个web app则全屏显示

  • <link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />

  • <link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />

    定义添加到主屏幕后的图标样式,唯一的区别是*-precomposed不会运用IOS默认的圆角和调光;

    apple-touch-icon 标签支持sizes属性,可以用来放置对应不同的设备:

    • 57×57(默认值)的图标对应320×640的iPhone老设备,
    • 72×72对应iPad,
    • 114×114对应retina屏的iPhone及iTouch。ipad3对应144×144的高分辨率。

      所以最完善的写法应该是:

        <link rel="apple-touch-icon" sizes="57x57" 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" />
        <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3-144.png" />
      

      虽然官方都用的png图片做说明,但实际测试jpg格式也可用(不推荐),图片无需做圆角和高光效果,同Native App一样,系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果,可以用apple-touch-icon-precomposed代替apple-touch-icon,这时我们提供的图标就要自己做圆角和高亮效果了。

      图标搜索的优先级如下:

    • 如果没有跟相应设备推荐尺寸一致的图标,那个会优先使用比推荐尺寸大,但最接近推荐尺寸的图标。

    • 如果没有比推荐尺寸大的图标,会优先选择最接近推荐尺寸的图标。
    • 如些有多个图标符合推荐尺寸,会优先选择包含关键字precomposed的图标。
    • 如果未在区域指定用link标签指定图标,会自动搜索网站根目录下有apple-touch-icon…或者 apple-touch-icon-precomposed…前缀的图标。

      如设备推荐尺寸为57x57,优先级如下:

        apple-touch-icon-57×57-precomposed.png
        apple-touch-icon-57×57.png
        apple-touch-icon-precomposed.png
        apple-touch-icon.png
      

      在第三代 iPad 上有四种图标规格: 57x57, 72x72, 114x114, 144x144.

      由于 retina 图标的尺寸是标准图标大小的2倍,因此实际上我们只需要只做2款图标即可:114 x 114 和 144 x 144 。

      将retina 图标的大小设置成标准图标的尺寸,那么IOS就会根据情况自动进行缩放了。