什么是特殊的iPhone/iPod Touch HTML标签？

Question

偷看SO 源后,我发现了这个标签:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

快速谷歌发布了一个Apple"favicon"类型的东西,在你的主页上显示(确切地说是"WebClip书签").

跳到脑海的唯一另一个是:

<input type="search" results="5"/>

_{(来源:alexking.org)}

此类型="搜索"使该字段"继承"Apple搜索图标,并且可选结果="x"使得能够维护"x"关键字的历史记录.

我很想知道,其他Apple/Safari(iPhone/iPod Touch)特定的HTML标签和属性是我不知道的!好奇的头脑需要知道!

Answer 1

<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">

允许您设置宽度,高度和比例值

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

设置状态栏样式,非常自我解释.

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

正如Marc上面提到的那样,并且在daringfireball.net链接中进行了解释,允许网页以全屏模式运行,而不是通过safari.

还支持其他各种属性,并在此处记录:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Answer 2

以为我会添加自己的答案,我已经看到了一些新的东西.

1.)可以选择提供更高清晰度的iPhone 4视网膜显示图标

<link rel="apple-touch-icon" href="icons/regular_icon.png" />
<link rel="apple-touch-icon" href="icons/retina_icon.png" sizes="114x114"/>

2.)如果您发现iPhone/iPod/iPad在应用程序图标上放置的默认光泽覆盖图太多,您可以通过在rel属性中添加"precomposed"来请求不添加它.

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

3.)您可以直接为手机/短信发短信的iPhone链接执行所需的操作

<a href="tel:01234567890">Call us</a>
<a href="sms:01234567890">Text us</a>

4.)不完全是HTML标签,但是基于方向切换CSS的方便选项

<script type="text/javascript">
  function orient(){
    switch(window.orientation){
      case 0:
        document.getElementById("orient_css").href = "css/iphone_portrait.css";
        break;
      case -90: 
        document.getElementById("orient_css").href = "css/iphone_landscape.css";
        break;
      case 90: 
        document.getElementById("orient_css").href = "css/iphone_landscape.css";
        break;
    }
  }
  window.onload = orient();
</script>

5.)你可以为iPhone 4的视网膜显示器提供一个特殊的CSS样式表,它支持4倍于原始像素的像素.

<link rel="stylesheet" type="text/css" href="../iphone4.css"
   media="only screen and (-webkit-min-device-pixel-ratio: 2)" />

感谢@Sarah Parmenter通过24种方式获取这些附加信息.