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

问题描述 投票:18回答:6

偷看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"/>

alt text (来源:alexking.org

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

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

iphone html safari ipod-touch
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


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 ways的更多信息。


4
投票

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



2
投票

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

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

1
投票

事实证明,它们中有很多!

我发现这个有趣:

要指定整个网站的图标(网站上的每个页面),请将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

© www.soinside.com 2019 - 2024. All rights reserved.