前言

ios 6 7 8 各种烂。前者对 click 尤其慢（有 300ms 的说法），用 touchstart 快，只是容易在 touchmove 的时候 也触发，过于敏感。

另外，对于 overflow:scroll 的处理 三者也方法混乱，各自不同。ios8 可能还有点人性。但 pdf 除非 独占窗口 否则 只能显示 第一页。

在 apple-mobile-web-app-capable 模式下，三者也是各领骚气。ios 6 的 a herf 会导致切换到 safari 打开。必须 location=”111”;return false;

js

//click on pc and touchstart on mobile
var gsclick=((document.ontouchstart!==null)?'click':'touchstart');

/*
!!注意：这是 ios6 的写法，不能用于 ios8（导致iframe不能拖动）

关掉 touchstart 
然后关掉 html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
} ；
然后使用 :active

document.addEventListener("touchstart", function() {},false);

禁止 上下乱拖
document.ontouchmove = function(event){
    event.preventDefault();
}

*/    

各种 meta

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

加到主屏以后，全屏显示

<meta name="apple-mobile-web-app-title" content="iOS Web App">

加到主屏时显示的标题

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

头部状态栏显示方式 default, black, and black-translucent（ios6 7 各有不同效果）

<meta name="viewport" content="initial-scale=1">

默认比例

<meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1">

不允许用户放大缩小

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

不予许 苹果自做聪明地 把一串数字修改为 tel:1234 的链接

万恶的程序图标

<!-- iPad retina icon -->
<link href="apple-touch-icon-precomposed-152.png"
      sizes="152x152"
      rel="apple-touch-icon-precomposed">
<!-- iPad retina icon (iOS < 7) -->
<link href="apple-touch-icon-precomposed-144.png"
      sizes="144x144"
      rel="apple-touch-icon-precomposed">
<!-- iPad non-retina icon -->
<link href="apple-touch-icon-precomposed-76.png"
      sizes="76x76"
      rel="apple-touch-icon-precomposed">
<!-- iPad non-retina icon (iOS < 7) -->
<link href="apple-touch-icon-precomposed-72.png"
      sizes="72x72"
      rel="apple-touch-icon-precomposed">
<!-- iPhone 6 Plus icon -->
<link href="apple-touch-icon-precomposed-180.png"
      sizes="120x120"
      rel="apple-touch-icon-precomposed">
<!-- iPhone retina icon (iOS < 7) -->
<link href="apple-touch-icon-precomposed-114.png"
      sizes="114x114"
      rel="apple-touch-icon-precomposed">
<!-- iPhone non-retina icon (iOS < 7) -->
<link href="apple-touch-icon-precomposed-57.png"
      sizes="57x57"
      rel="apple-touch-icon-precomposed">

• 152x152 (76@2x) for iPad retina on iOS 7+
• 144x144 (72@2x) for iPad retina on iOS 6
• 76x76 for iPad on iOS 7+
• 72x72 for iPad on iOS 6
• 180x180 (60@3x) for iPhone 6 Plus
• 144x144 (57@2x) for iPhone retina on iOS 6
• 57x57 for iPhone on iOS 6

如果没有上面的 meta 标签，苹果会按照下面的顺序寻找

• /apple-touch-icon-180x180-precomposed.png
• /apple-touch-icon-180x180.png
• /apple-touch-icon-precomposed.png
• /apple-touch-icon.png

更加万恶的启动画面（splash）

<!-- iPad retina portrait startup image -->
<link href="apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px)
             and (-webkit-device-pixel-ratio: 2)
             and (orientation: portrait)"
      rel="apple-touch-startup-image">
<!-- iPad retina landscape startup image -->
<link href="apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px)
             and (-webkit-device-pixel-ratio: 2)
             and (orientation: landscape)"
      rel="apple-touch-startup-image">
<!-- iPad non-retina portrait startup image -->
<link href="apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px)
             and (-webkit-device-pixel-ratio: 1)
             and (orientation: portrait)"
      rel="apple-touch-startup-image">
<!-- iPad non-retina landscape startup image -->
<link href="apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px)
             and (-webkit-device-pixel-ratio: 1)
             and (orientation: landscape)"
      rel="apple-touch-startup-image">
<!-- iPhone 6 Plus portrait startup image -->
<link href="apple-touch-startup-image-1242x2148.png"
      media="(device-width: 414px) and (device-height: 736px)
             and (-webkit-device-pixel-ratio: 3)
             and (orientation: portrait)"
      rel="apple-touch-startup-image">
<!-- iPhone 6 Plus landscape startup image -->
<link href="apple-touch-startup-image-1182x2208.png"
      media="(device-width: 414px) and (device-height: 736px)
             and (-webkit-device-pixel-ratio: 3)
             and (orientation: landscape)"
      rel="apple-touch-startup-image">
<!-- iPhone 6 startup image -->
<link href="apple-touch-startup-image-750x1294.png"
      media="(device-width: 375px) and (device-height: 667px)
             and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPhone 5 startup image -->
<link href="apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px)
             and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPhone < 5 retina startup image -->
<link href="apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
             and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPhone < 5 non-retina startup image -->
<link href="apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
             and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

• 1536x2008 (768x1004@2x) for iPad retina portrait
• 1496x2048 (748x1024@2x) for iPad retina landscape
• 768x1004 for iPad portrait
• 748x1024 for iPad landscape
• 1242x2148 (414x716@3x) for iPhone 6 Plus portrait
• 1182x2208 (394x736@3x) for iPhone 6 Plus landscape
• 750x1294 (375x647@2x) for iPhone 6
• 640x1096 (320x548@2x) for iPhone 5
• 640x920 (320x460@2x) for iPhone retina
• 320x460 for iPhone