欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

在手机版网站中需要添加的几种Meta标签

shiping 的头像

在制作手机版网站的时候,除了留意页面简洁、操作方便等访问者可以看到的地方以外,还有一些浏览者看不到而搜索引擎或者其它机器设备可以看到的信息需要留意,例如HTML源代码中的Meta标签,合理设置这些地方对手机版网站的搜索引擎优化、手机浏览器的渲染展示都有帮助作用。

  这方面的中文文章比较少,英文文章还有一些,例如这篇:Mobile META Tags(link is external),在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开发实战必读书记

标签: html5 移动 web | 发表时间:2014-08-12 12:15 | 作者:flowerwrong
分享到:
出处:http://www.iteye.com

一、配置移动开发环境 
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中的meta

2012-07-01 06:31高越月  分类:其他编程语言 | 浏览 11592 次
html5开发的wap网站这三个分别代表什么含义?
<meta name="MobileOptimized" content="240"/>
 <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
具体点,搜了很多资料都没找到答案。
 
2012-07-02 09:28
正确答案  <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



移动前端头部标签(HTML5 head meta)

发表于4个月前(2015-02-04 10:08)   阅读(618) | 评论(0 17人收藏此文章, 我要收藏
0

寻找 会’偷懒’的开发者线下公开课,报名即享受免费体验云主机

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 -->
<html lang="zh-cmn-Hans"<!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
    <!-- 声明文档使用的字符编码 -->
     <meta charset='utf-8'>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="name, email@gmail.com"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
 
    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- 添加到主屏后的标题(iOS 6 新增) -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 -->
 
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽略页面中的数字识别为电话,忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- iOS 图标 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
    <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- Retina iPad,144x144 像素,可以没有,但推荐有 -->
    <!-- iOS 图标 end -->
 
    <!-- iOS 启动画面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    <!-- iPad 竖屏 768 x 1004(标准分辨率) -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    <!-- iPad 竖屏 1536x2008(Retina) -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad 横屏 1024x748(标准分辨率) -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPad 横屏 2048x1496(Retina) -->
 
    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    <!-- iOS 启动画面 end -->
 
    <!-- iOS 设备 end -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 磁贴图标 -->
 
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- 添加 RSS 订阅 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <!-- 添加 favicon icon -->
    <!-- sns 社交标签 begin -->
    <!-- 参考微博API -->
    <meta property="og:type" content="类型" />
    <meta property="og:url" content="URL地址" />
    <meta property="og:title" content="标题" />
    <meta property="og:image" content="图片" />
    <meta property="og:description" content="描述" />
    <!-- sns 社交标签 end -->
 
    <title>标题</title>
</head>
分享到: 0
来自 http://my.oschina.net/u/1040928/blog/375100


html5实现完美兼容各大浏览器的播放器

来源:互联网 作者:佚名 时间:12-26 16:40:36   
这篇文章主要介绍了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




 

普通分类: