18

在查看 SO源代码后，我注意到了这个标签：

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

在谷歌快速发布后，在您的主页上显示了一个 Apple“favicon”类型的东西（确切地说是“WebClip Bookmark”）。

唯一想到的另一个是：

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

替代文字
（来源：alexking.org）

此 type="search" 使该字段“继承” Apple 搜索图标，并且可选 results="x" 允许维护“x”关键字的历史记录。

因此，我想知道，我不知道还有哪些其他 Apple/Safari (iPhone/iPod Touch) 特定的 HTML 标记和属性！好奇的人需要知道！

4

6 回答 6

17 
<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

于 2008-12-22T22:54:02.043 回答
9

以为我会用我看到的一些新事物来添加我自己的答案。

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 种方式提供此附加信息。

于 2010-12-31T22:47:27.707 回答
4

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

于 2008-12-22T21:03:10.537 回答
3

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

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

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

于 2009-09-16T10:05:22.280 回答
2

@scunliffe 我将您的方向切换更进一步：

function orient(o){
  switch(o){
    case -90:
    case 90: 
      $('#container').removeClass().addClass('landscape');
    break;
    default:
      $('#container').removeClass().addClass('portrait');
    break;
  }
}
于 2011-03-15T04:45:21.517 回答
1

事实证明，它们有很多！

我发现这个很有趣：

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

precomposed 适用于 iPhone OS 2.0 及更高版本

DaringFireball 链接 Marc 分享了指向 Safari Web 内容指南的链接。正如安迪所说，您必须注册它，但它免费且容易（嗯，不如 OpenID 容易，但很接近）。

Safari 网页内容指南

于 2009-01-01T19:10:12.177 回答