我是一名C ++开发人员，他最近开始在我的移动应用程序中使用HTML5，我在网络编程领域没有太多的知识，我非常想要一些建议，以便微调我的元标记
我需要适合ios / android / windows phone / blackberry等移动应用程序的完美元标记。
问题是我不确定我到底需要什么以及我不需要什么，这是我到目前为止的清单：
html, body
{
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-drag: none;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-overflow-scrolling: none;
-webkit-backface-visibility: hidden;
-webkit-transition: translate3d(0,0,0);
transition: translate3d(0,0,0);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
-webkit-text-stroke: 1px
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
margin: 0;
padding: 0;
border: 0;
background-color:#202020;
}
* {margin:0; padding:0; border:0;}
<!DOCTYPE html>
<html>
<head>
<title>$Title</title>
<meta charset="UTF-8">
<meta name="keywords" content="Test">
<meta name="description" content="Test">
<meta name="subject" content="Test">
<meta name="copyright" content="Test">
<meta name="url" content="http://www.test.com">
<meta name="language" content="en-GB">
<meta name="robots" content="NOINDEX, NOFOLLOW">
<meta name="pagename" content="$Title">
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
<meta name="target" content="all">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="640">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">
<meta name="apple-mobile-web-app-title" content="$Title">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="ResourceLoaderDynamicStyles" content="">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="x-dns-prefetch-control" content="off">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Set a shorter title for iOS6 devices when saved to home screen -->
<meta name="apple-mobile-web-app-title" content="Ratchet">
<script>
document.ontouchmove = function(e)
{
e.preventDefault();
}
</script>
有什么建议吗？
答案 0 :(得分：8)
你需要：
<meta charset="UTF-8">
<title></title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- user-scalable = no＆＃34;这将阻止您的应用程序缩放，我建议不要使用（糟糕的用户体验）
<meta name="apple-mobile-web-app-title" content="$Title">
- 启动标题，如果您不想使用标题标签。
<meta name="apple-mobile-web-app-capable" content="yes">
- 这将隐藏浏览器界面
<meta name="apple-mobile-web-app-status-bar-style" content="black">
- 这将改变ios中状态栏的颜色
你应该添加：
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
-iOs启动器图标
<meta name="msapplication-TileImage" content="icon.png">
<meta name="msapplication-TileColor" content="#222222">
- Windows图标
<link rel="apple-touch-startup-image" href="/startup-image.png">
-iOs startup-image
<meta name="mobile-web-app-capable" content="yes">
- Android / Chrome主屏幕
你不需要：
<meta name="keywords" content="Test">
- 不需要这个，谷歌和其他搜索引擎不使用关键字meta
<meta name="subject" content="Test">
- 页面主题。不推荐
<meta name="copyright" content="Test">
- 对你来说更适合其他人
<meta name="url" content="http://www.test.com">
- 这是您的完整域名或网址。对于SEO
<meta name="language" content="en-GB">
- W3C建议使用<html lang="en">而非元标记
<meta name="pagename" content="$Title">
- 这是额外的页面标题。 html5规范中没有这样的标签吗？
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
- 定义抓取工具的分发级别或程度，但是没有可识别的元数据，那么您就不应该使用它们。对HTML5无效
<meta name="target" content="all">
- ???不确定它是什么：P一些疯狂的旧东西？ html5规范中没有这样的标签吗？
<meta name="HandheldFriendly" content="True">
- 旧Windows手机的未来说明该页面可在小屏幕上查看
<meta name="MobileOptimized" content="640">
- 声明屏幕页面的大小是针对Windows优化的，但它适用于旧手机而且它并没有真正起作用。我建议使用媒体查询。
<meta name="format-detection" content="telephone=no">
- iOS上的Safari电话号码检测（如果禁用此功能，则为坏Ux）
<meta http-equiv="cleartype" content="on">
- 移动IE平滑字体功能，但这不是标准的W3C标记。我建议在CSS中进行字体平滑。
<meta name="apple-touch-fullscreen" content="yes">
- 这用于早期演示。您只需要<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="ResourceLoaderDynamicStyles" content="">
- 这应该使浏览器在添加CSS之前标记DOM。我不认为你应该这样做。
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
- 缓存一切。现在，服务器端已经完成了那种事情。
<meta http-equiv="imagetoolbar" content="no">
- IE6功能。显然不需要
<meta http-equiv="x-dns-prefetch-control" content="off">
- DNS预取。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
- IE8 / 9兼容模式。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- 重复的条目<meta charset="UTF-8">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Set a shorter title for iOS6 devices when saved to home screen -->
<meta name="apple-mobile-web-app-title" content="Ratchet">
- 重复的条目