iPhone / iPod Touch 有哪些特殊的 HTML 标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/387318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What are all the special iPhone / iPod Touch HTML tags?
提问by scunliffe
After peeking at the SO source, I noticed this tag:
在查看了 SO源代码后，我注意到了这个标签：
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Which after a quick Google revealedan Apple "favicon" type thing for display on your homepage ("WebClip Bookmark" to be exact).
在 Google 快速搜索之后，在您的主页上显示了一个 Apple“favicon”类型的东西（确切地说是“WebClip Bookmark”）。
The only other one that jumps to mindis the:
唯一想到的另一个是：
<input type="search" results="5"/>
(source: alexking.org)
（来源：alexking.org）
This type="search" causes the field to "inherit" the Apple search icon, and the optional results="x" enables a history of "x" keywords to be maintained.
此 type="search" 使该字段“继承”Apple 搜索图标，可选的 results="x" 可以维护“x”关键字的历史记录。
I'm therefore wondering, what other Apple/Safari (iPhone/iPod Touch) specific HTML tags and attributes are out there that I'm not aware of! Curious minds need to know!
因此，我想知道还有哪些其他 Apple/Safari (iPhone/iPod Touch) 特定的 HTML 标签和属性是我不知道的！好奇的头脑需要知道！
采纳答案by Andy Bourassa
<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">
Allows you to set the width, height and scale values
允许您设置宽度、高度和比例值
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Set the status bar style, pretty self explanatory.
设置状态栏样式，不言自明。
<meta name="apple-mobile-web-app-capable" content="yes" />
As Marc mentioned above, and is explained in the daringfireball.net link, allows the webpage to be run in full-screen mode, as opposed to through safari.
正如 Marc 上面提到的，并在 daringfireball.net 链接中进行了解释，允许网页以全屏模式运行，而不是通过 safari。
There's other various attributes that are supported and are documented here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
还有其他各种受支持并在此处记录的属性：https: //developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
回答by scunliffe
Thought I'd add my own answer with some new things I've seen crop up.
我想我会用我看到的一些新事物来添加我自己的答案。
1.) There's an option for providing a higher definition iPhone 4 retina display icon
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.) If you find the default glossy overlay that iPhone/iPod/iPad places on app icons is too much, you can request to not have it added by adding "precomposed" to the rel attribute.
2.) 如果您发现 iPhone/iPod/iPad 放置在应用程序图标上的默认光泽覆盖太多，您可以通过在 rel 属性中添加“precomposed”来请求不添加它。
<link rel="apple-touch-icon-precomposed" href="/images/touch-icon.png" />
3.) You can make iPhone links for phone/sms texting directly do the desired action
3.) 您可以让 iPhone 的电话/短信链接直接执行所需的操作
<a href="tel:01234567890">Call us</a>
<a href="sms:01234567890">Text us</a>
4.) Not quite an HTML tag, but a handy option for toggling CSS based on orientation
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.) You can provide a special CSS stylesheet for iPhone 4's retina display which supports 4x as many pixels as the original.
5.) 您可以为 iPhone 4 的视网膜显示提供一个特殊的 CSS 样式表，它支持 4 倍于原始像素的像素。
<link rel="stylesheet" type="text/css" href="../iphone4.css"
media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
Thanks to @Sarah Parmenter over on 24 waysfor this added information.
感谢@Sarah Parmenter 提供了24 种方式来提供这些附加信息。
回答by Marc Charbonneau
A useful header tag for single-purpose webapps is apple-mobile-web-app-capable. When the user creates a home screen shortcut for the site, it will launch in 'fullscreen' mode, separate from the normal Mobile Safari application and without the URL bar or other chrome. If the site is nicely designed it can feel almost like a native iPhone app.
单一用途的 webapps 的一个有用的标头标签是apple-mobile-web-app-capable。当用户为站点创建主屏幕快捷方式时，它将以“全屏”模式启动，与普通的 Mobile Safari 应用程序分开，并且没有 URL 栏或其他镶边。如果网站设计得很好，它几乎就像是一个原生的 iPhone 应用程序。
回答by Jeroen
The above mentioned documentation has moved. These are the new locations.
上面提到的文档已经移动。这些是新的地点。
Safari HTML Reference: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/
Safari HTML 参考：https: //developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/
Safari Web Content Guide: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/
Safari Web 内容指南：https: //developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/
回答by jozecuervo
@scunliffe I took your orientation switch a step further:
@scunliffe 我把你的方向切换更进一步：
function orient(o){
switch(o){
case -90:
case 90:
$('#container').removeClass().addClass('landscape');
break;
default:
$('#container').removeClass().addClass('portrait');
break;
}
}
回答by Jared Harley
It turns out, there are a lot of them!
事实证明，有很多！
I found this one interesting:
我发现这个很有趣：
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iPhone won't add any effects to the icon.
precomposed is available to iPhone OS 2.0 and later
要为整个网站（网站上的每个页面）指定一个图标，请将一个 PNG 格式的图标文件放在名为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png 的根文档文件夹中。如果您使用 apple-touch-icon-precomposed.png 作为文件名，iPhone 上的 Safari 将不会向图标添加任何效果。
预合成适用于 iPhone OS 2.0 及更高版本
The DaringFireball link Marc shared links to the Safari Web Content guide. As mentioned by Andy, you have to sign up for it, but it's free and easy (well, not as easy as OpenID, but close).
DaringFireball 链接 Marc 共享了 Safari Web 内容指南的链接。正如 Andy 提到的，你必须注册它，但它免费且简单（嗯，不像 OpenID 那样简单，但很接近）。
