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

Question

偷看SO source之后，我注意到了这个标签：

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

在快速的Google revealed之后，在您的主页上显示Apple“favicon”类型的东西（确切地说是“WebClip Bookmark”）。

jumps to mind唯一的另一个是：

<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/archive/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:[phone]">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 ways的更多信息。

Answer 3

用于单用途webapps的有用标头标签是apple-mobile-web-app-capable。当用户为网站创建主屏幕快捷方式时，它将以“全屏”模式启动，与普通的Mobile Safari应用程序分开，没有URL栏或其他镶边。如果网站设计得很好，它就会感觉就像一个原生的iPhone应用程序。

Answer 4

上述文件已经移动。这些是新的地点。

Safari HTML参考：https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/

Safari Web内容指南：https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/

Answer 5

@scunliffe我将你的方向开关更进了一步：

function orient(o){
  switch(o){
    case -90:
    case 90: 
      $('#container').removeClass().addClass('landscape');
    break;
    default:
      $('#container').removeClass().addClass('portrait');
    break;
  }
}

Answer 6

事实证明，它们中有很多！

我发现这个有趣：

要指定整个网站的图标（网站上的每个页面），请将PNG格式的图标文件放在名为apple-touch-icon.png或apple-touch-icon-precomposed.png的根文档文件夹中。如果您使用apple-touch-icon-precomposed.png作为文件名，iPhone上的Safari将不会向该图标添加任何效果。

预组合适用于iPhone OS 2.0及更高版本

DaringFireball链接Marc共享指向Safari Web内容指南的链接。正如Andy所提到的，你必须注册它，但它是免费且简单的（好吧，不像OpenID那么容易，但很接近）。

Safari Web Content Guide