You are here
在手机版网站中需要添加的几种Meta标签
在制作手机版网站的时候，除了留意页面简洁、操作方便等访问者可以看到的地方以外，还有一些浏览者看不到而搜索引擎或者其它机器设备可以看到的信息需要留意，例如HTML源代码中的Meta标签，合理设置这些地方对手机版网站的搜索引擎优化、手机浏览器的渲染展示都有帮助作用。
这方面的中文文章比较少，英文文章还有一些，例如这篇：Mobile META Tags，在2009年就介绍得比较全面了，我这里只简单介绍如下：
移动设备相关的Meta标签主要有三种：
- MobileOptimized META：微软为IE Mobile版设置的定义宽度标记
- HandheldFriendly META：是否对手持设备友好，只有true或者false
- Viewport META：控制显示尺寸、是否允许缩放、初始比例、上下限等
在Drupal 7 的Mobile Theme中，html.tpl.php里面已经预置了如下的标签：
<meta name="MobileOptimized" content="width" /> <meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width, target-densityDpi=160dpi, initial-scale=1, user-scalable=1" />
我把这些进行适当修改后，也放到Drupal 6的Nokia Mobile Theme的page.tpl.php中，以及MediaWiki的皮肤文件MonoBook.php中。您也可以根据自己手机网站的情况，进行修改后放到页面的HTML代码中。
来自 http://m.jamesqi.com/%E5%8D%9A%E5%AE%A2/%E5%9C%A8%E6%89%8B%E6%9C%BA%E7%89%88%E7%BD%91%E7%AB%99%E4%B8...
html5移动web开发实战必读书记
一、配置移动开发环境
1.各种仿真器、模拟器的下载安装
http://www.mobilexweb.com/emulators
https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Emulators-&-Simulators
2.html5 DTD
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
safari: 设为屏幕宽度，并根据initial-scale=1.0禁止浏览器缩放
3.帮助html5跨浏览器的库
modernizr
html5shim
innershiv
4.使html5元素在旧版本IE中变成块级元素以及css重置
5.始终使用流式布局fluid layout
6.css媒介查询 media query
@media screen and (min-width: 480px) {...}
@media only screen and (min-width: 320px) {...}
7.用户需求分析工具
google analytics
percentmobile
jQuery mobile的浏览器分级列表：http://jquerymobile.com/gbs/
https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices
二、移动端的配置和优化
1.提供启动图标（优化对各种浏览器的支持）
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icons/apple-touch-icon-114x114-precomposed.png"> # iphone4 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="icons/apple-touch-icon-72x72-precomposed.png"> # ipad <link rel="apple-touch-icon-precomposed" href="icons/apple-touch-icon-precomposed.png"> # android <link rel="shortcut icon" href="icons/apple-touch-icon.png"> # symbian60
文档：关于触摸式图标的一起
2.避免字体被浏览器自动重置
html {
-webkit-text-size-adjust: none;
}
改进
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
3.使用px
4.浏览器宽度完整解决方案
<meta name="HandheldFriendly" content="true"> # 古老版本浏览器
<meta name="MobileOptimized" content="320"> # 老版本浏览器
<meta name="viewport" content="width=device-width">
5.修复移动版safari的re-flow scale问题
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0"> # 不能缩放了
使用js代码解决不能缩放问题：
var metas = document.getElementByTagName("meta");
var i;
if(navigator.userAgent.match("/iPhone/i)) {
for(i=0; i<metas.length; i++) {
if(meta[i].name == "viewport") {
metas[i].content = "width=device-width, maximum-scale=1.0, minimum-scale=1.0";
}
}
document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
for(i=0; i<metas.length; i++) {
if(meta[i].name == "viewport") {
metas[i].content = "width=device-width, maximum-scale=1.6, minimum-scale=0.25";
}
}
}
更好的版本：https://gist.github.com/903131
jquery mobile版本：https://gist.github.com/1183357
6.在浏览器中启动原生应用
查看safari，黑莓，索爱支持哪些链接启动原生应用
7.iphone下全屏
<meta name="apple-mobile-web-app-capable" content="yes"> # 从界面图标启动时，全屏
<meta name="apple-mobile-web-app-status-bar-style" content="black"> # 顶部一个状态栏
<link rel="apple-touch-startup-image" href="img/1/splash.png"> # 预加载界面图片，类似ajax效果
8.防止ios在聚焦时自动缩放，例如填写表单时
<script>
</script>
9.禁用或者限制部分webkit特性
-webkit-touch-callout
-webkit-user-select
-webkit-tap-highlight-color
-webkit-appearance
为狭窄的浏览器添加省略号功能：
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
三、移动设备的交互方式
1.利用触控来移动页面元素
2.检测盒处理横竖屏切换事件
window.onorientationchange事件
禁止横竖屏对于网友非常困难
3.利用手势旋转页面元素
ongestureend
4.利用滑动创建图库
zepto框架
5.利用手势缩放图片
ongesturechange
四、构建快速响应式移动互联网站点
1.html5标签
header，nav，footer，small，address
2.css3辅助
polyfills库
ultimate css gradient generator # css线性渐变效果编辑器
CSS3 PIE # 兼容IE9
3.响应式
使用modernizr库开检查浏览器对html3和css3的支持
可以用来检查后是否加载respond.min.js
yepnope异步加载
4.检测客户端
.htaccess重定向
5.使用书签冒泡为应用添加桌面快捷方式
mobilebookmark bubble库 from google # 只支持safari
6.构建可伸缩的文本输入框
mobile boilerplate库的helper.js
7.加速按钮反馈
touchstart
8.隐藏浏览器地址栏
MBP.hideUrlBar();
五、移动设备访问
1.获取位置信息
经度、纬度、当前位置的精确程度
navigator.geolocation.getCurrentPosition()
2.跨浏览器定位
geo-location-javascript库
延伸：YQL Geo库
手势缩放：
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
3.实时显示地理位置
watchPosition
4.DeviceOrientation事件 # 适用于ios
包括设备移动事件和横竖屏切换事件
5.使用foursquare定位
Marelle基于jquery和coffeescript
https://praized.github.com/marelle/
包括两个例子：登录和签到
foursquare接口列表
https://developer.foursquare.com/docs/libraries.html
六、移动富媒体
1.移动设备上播放音频
<audio>
不支持html5的浏览器使用polyfills解决
2.移动设备上播放视频
<video>
不支持html5的使用<boject>
http://diveintohtml5.info/video.html
3.使用离线缓存
使用.appcache
4.使用网络存储
web storage # 浏览器支持度最高
html5的indexed database api和web sql database
jqueryoffine库
5.使用web workers
javascript多线程的补充
6.使用session和history api构建类Flash导航效果
七、移动设备调试
1.使用opera dragonfly远程调试
2.使用weinre远程调试
3.移动设备上使用firebug
4.使用js console远程调试
5.配置移动safari调试器
八、服务器端性能调优
1.防止移动设备转码
.htaccess配置
2.添加移动设备支持的MIME类型
.htaccess配置 # 针对blackberry和Symbian等
3.正确显示cache manifest # 主要用来做离线应用存储功能，但是扩展名不能被服务器识别
.htccess配置
4.在头文件中设置未来过期时间
.htccess配置
5.使用gzip压缩
.htaccess配置
6.移除etags
.htaccess配置
九、移动性能测试
1.使用blaze的移动设备速度测试
2.在线分析移动页面速度
google page speed
3.pcap网站性能分析
4.移动版http archive
5.使用jdrop存储性能数据
十、拥抱移动互联网特性
1.window.onerror
2.使用ecmascript5中的新方法
3.html5中的新输入类型
date、datetime、month、time、range
4.HTML中内嵌svg
5.position:fixed
6.overflow:scroll # ios5+
-webkit-overflow-scrolling: touch
来自 http://itindex.net/detail/50689-html5-%E7%A7%BB%E5%8A%A8-web
html5开发的wap网站这三个分别代表什么含义？
<meta name="MobileOptimized" content="240"/>
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
具体点，搜了很多资料都没找到答案。
正确答案 <META NAME="MobileOptimized" CONTENT="240">浏览器不会自动调整文件的大小,也就是说是固定大小,不会随着浏览器拉伸缩放。
<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕“后，全屏显示
<meta name="apple-mobile-web-app-capable" content="yes" />
如果内容设置为YES，Web应用程序运行在全屏模式;否则，它不会。默认行为是使用Safari浏览器显示网页内容
来自 http://zhidao.baidu.com/link?url=OSApo2o7PC406-BWjczBZqE-MuKkLHvu7rhfquWZO2phOlZ51xaKi9tSIJj2Nkwj7UymxGViILIroO0s0ruWNa
寻找 会’偷懒’的开发者线下公开课，报名即享受免费体验云主机
0赞来自 http://my.oschina.net/u/1040928/blog/375100
html5实现完美兼容各大浏览器的播放器
歌曲播放我们会发现他的兼容性不是很好，譬如IE上能播放的flash播放器，再firfox或者chrome上就不是很好的应用了，因为有插件的阻碍!HTML5的出现让这一切成为了可能，但是播放器虽然播放了，我们还要关注一下用户的体验度，所以，我们就写了一个HTML兼容的播放器！向下兼容IE6-9、chrome、firfox、opera等主流播放器，应该是全兼容！实现原理代码给大家奉上！
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>歌词同步播放器-powered by widuu xiaowei</title>
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.4">
<meta name="MobileOptimized" content="240">
<link href="/mp3/css/blue.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/mp3/js/jquery.js"></script>
<script type="text/javascript" src="/mp3/js/jquery.jplayer.js"></script>
<script type="text/javascript" src="/mp3/js/lrc.js"></script>
<style type="text/css">
* { margin:0; padding:0; }
ul, ol, dl { list-style:none; }
.content li.hover{ color:red; }
.content{ width:402px; height:200px; background:#ccc; overflow:hidden; padding:10px;}
</style>
<script>
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
mp3:"yangcong.mp3" //mp3的播放地址
}).jPlayer("play");
},
timeupdate: function(event) {
if(event.jPlayer.status.currentTime==0){
time = "";
}else {
time = event.jPlayer.status.currentTime;
}
},
play: function(event) {
//点击开始方法调用lrc。start歌词方法 返回时间time
if(event.jPlayer.status.currentTime==0){
$("#jquery_jplayer_1").jPlayer("pause",1);
}
if($('#lrc_content').val()!==""){
$.lrc.start($('#lrc_content').val(), function() {
return time;
});
}else{
$(".content").html("没有字幕");
}
},
repeat: function(event) {
if(event.jPlayer.options.loop) {
$(this).unbind(".jPlayerRepeat").bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
$(this).jPlayer("play");
});
} else {
$(this).unbind(".jPlayerRepeat");
}
},
swfPath: "/js", //存放jplayer.swf的决定路径
solution:"html, flash", //支持的页面
supplied: "mp3", //支持的音频的格式
wmode: "window"
});
$("#lrc_content").hide();
});
//]]>
</script>
</head>
<body>
<textarea id="lrc_content" name="textfield" cols="70" rows="10">
[ar:测试用 ]
[00:03.00]洋葱
[00:06.00]演唱：平安
[00:09.00]
[00:11.38]如果你眼神能够为我片刻的降临
[00:21.23]如果你能听到心碎的声音
[00:28.88]盘底的洋葱像我永远是配角戏
[00:35.74]偷偷的看着你偷偷的隐藏着自己
[00:43.48]
[00:44.90]如果你愿意一层一层
[00:48.46]一层的剥开我的心
[00:52.66]你会发现你会讶异
[00:56.40]你是我最压抑最深处的秘密
[01:00.26]如果你愿意一层一层
[01:03.69]一层的剥开我的心
[01:07.76]你会鼻酸你会流泪
[01:11.60]只要你能听到我看到我的全心全意
[01:18.30]
[01:19.11]如果你愿意一层一层
[01:22.57]一层的剥开我的心
[01:26.66]你会发现你会讶异
[01:30.41]你是我最压抑最深处的秘密
[01:34.48]如果你愿意一层一层
[01:37.58]一层的剥开我的心
[01:41.51]你会鼻酸你会流泪
[01:45.15]只要你能听到我看到我的全心全意
[01:53.55]
[01:55.65]你会鼻酸你会流泪
[01:59.84]只要你能听到我看到我的全心全意
[02:12.57]
</textarea></p> <p><p>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
</div>
<div class="jp-title">
<ul>
<li>mp3player powered by xiaowei</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="<a href="http://get.adobe.com/flashplayer/">http://get.adobe.com/flashplayer/</a>" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
<div class="content"><ul id="lrc_list">
点击开始播放……
</ul></div>
</body>
</html>
来自 http://www.jb51.net/html5/266602.html