【html5移动web开发】关于移动端开发
1.Google Analytics分析工具的使用：注册后页面中加入Google Analytics的代码，可以分析出有哪些设备在访问网站或者哪些页面访问量比较大、
2.Modernizr 可以检测浏览器对html5元素的支持性。可以判断是否支持localstorage等等
3.html5元素在旧版本的IE浏览器下显示为块级元素 article,aside,nav,section{ display:block;}
4.PC端采用固定布局与流体布局，而在移动网站中我们始终使用流体布局，它可以使你的网站适应不同的设备尺寸。
比如：竖屏下显示一列，横屏下显示2列（合理利用每个像素）
5.清除html5元素的默认样式
article,aside,section……{ margin:0; padding:0;border:0;font-size:100%;font:inherit; vertical-align:baseline;}
6.页面重置字体大小：-webkit-text-size-adjust:none;
-webkit-text-size-adjust:none;如果在Pc桌面访问，或者通过其他的非移动设备的浏览器访问，会导致页面的缩放功能会被禁用。
IPhone: html{-webkit-text-size-adjust:100%;}
微软 html{-ms-text-size-adjust:100%;}
7.媒介查询（media query）
@media screen and (min-width:320px){ }
8.同一个局域网下，可以使用XAMPP配置移动开发环境（本地网站服务），确认电脑和移动设备是在同一无线网络中。通过IP地址即可以访问
9.如果你的主要用户使用iphone和移动版safari,在桌面电脑上测试可以节约很多时间。打开safari,偏好设置---高级栏---开发---用户代理---Mobile safari 3.1.3-IPhone
10.通过界面图标启动web应用
Retina屏幕采用114*114的图标
<link rel='apple-touch-icon-precomposed' sizes='114*114' href='apple-touch-icon-114*114-precomposed.png'>
ipad使用72*72的图标
未使用Retina屏幕的的IPhone和Android 2.1以上版本的设备，使用57*57的图标
对于诺基亚塞班的设备，一个快捷键图标只是用来告诉移动设备这个图标的位置。
<link rel='shortcut icon' href='img/1/apple-touch-icon.png'>
11.（文字过小，不易读），为了让手机能获得更好的网页浏览体验，引入了viewport meta标签，它的作用就是创建一个虚拟视口，而这个虚拟窗口的分辨率接近于桌面显示器，Apple将其默认为980px,（如果不设置视口，它将会按照980像素的宽度渲染页面）
<meta name ='viewport' content='width=device-width'>
12.有些古老的移动设备浏览器不能识别viewport属性，对于这些浏览器，使用如下的代码：
<meta name='HandheldFriendly' content='true'> //PalmOS、AvantGo和黑莓设备
对于微软的PocketPC <meta name='MobileOptimized' content='320'>
13.IOS设备 移动版Safari有个烦人的问题就是：当你从竖屏模式切换到横屏模式的时候，浏览器上的文本字体会突然变大。（IOS7.2测试没这个问题）
怎么解决此问题呢 <meta name='viewport' content='width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0 '
但是会造成无法缩放，眼睛不好文字无法放大造成不易阅读的状况，所以就采用监听手势事件，当手势开始的时候就viewport设为默认值 默认最大放大1.6，最小为0.25
//检测所有的meta,设置它的viewport属性，最大为1.6，最小为原大小的0.25 ，iphone自带的gesturestart事件 bug:有时候第一次不起效果，第二次才能正常工作ios4
<script>
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
}
}
document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
}
}
}
</script>
13.手机启动google map地图，只需要<a href='http://maps.google.com/maps?q=cupertino'>添加地图，可以设置参数以便选择出发地和目的地
14.iphone下全屏模式启动，把该页添加为标签，然后通过界面图标启动(web应用)
<meta name='apple-mobile-web-app-capable' content='yes'> 当Web应用从界面图标启动时，以全屏模式启动，隐藏浏览器上部的工具栏、地址栏和底部的加载状态栏
<meta name='apple-mobile-web-app-status-bar-style' content='black'> 在浏览器的顶部显示一个状态栏
<link rel='apple-touch-startup-image' href='img/1/splash.png'> 在程序启动、加载的时候，显示一个预加载的界面，告诉用户该程序正在加载
IPhone和ipad因为屏幕大小的差异，因此需要不同大小的预加载界面
var filename = navigator.platform === 'ipad' ? 'h/' : 'i/';
document.write('<link rel="apple-touch-startup-image" href="/img/'+filename +'splash.png"/>');
15.表单在ios聚焦时会出现放大。如何禁用放大的功能
//输入框onfocus的时候viewport的属性 maximum-scale=1 ,blur失去焦点的时候maximum-scale=10
<script>
var $viewportMeta = $('meta[name="viewport"]');
$('input,select,textarea').bind('focus blur',function(event){
$viewportMeta.attr('content','width=device-width,initial-scale=1,maximum-scale=' + (event.type=='blur'? 10:1) );
}
</script>
16.如何禁用或者限制部分Webkit特性，比如说<a>链接点击的时候会出现提示是“打开链接 还是 复制 还是新的页打开 ”
解决办法：.nocallout {-webkit-touch-callout: none;}
如何在内容溢出的时候显示省略号 //禁止换行，超出内容隐藏显示省略号 white-space:nowrap;overflow:hidden;text-overflow:ellipsis
如何限制复制粘贴功能 -webkit-user-select:text
如何修改点击之后的背景颜色 -webkit-tap-highlight-color:rgba(0,0,0,0);
如何让文本内容可编辑 contenteditable=true
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<style>
html {color:#ff9;}
.a{ white-space: nowrap; overflow: hidden; text-overflow:ellipsis; -webkit-user-select:text;}//内容出现省略号
.nocallout {-webkit-touch-callout: none;}
#targetarea {width:200px; height:120px; padding-top:80px; background:#ccc; text-align:center; font-size:20px;}
</style>
</head>
<body>
<header >
</header>
<div id="targetarea" class="nocallout" contenteditable=true>
<a class="nocallout" href="http://www.google.com" target="_blank">Google</a>
</div>
<footer>
</footer>
</body>
</html>
17.移动端交互：
1）利用触控来移动页面元素
2）横竖屏切换事件
3）利用手势来旋转页面元素
4）利用滑动来创建图库
5）利用手势来缩放页面元素
//移动页面元素，移动版safari不允许event对象的touches和changedTouches属性被拷贝给其他对象，我们可以使用event.originalEvent来解决这个问题
（灰色部分是想让拖动点就在它的中心点上，自己测试所得。灰色前面部分是书上所写）
<script> $('#someElm').bind('touchmove',function(event){ event.preventDefault(); var touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0]; var elm = $(this).offset(); var x = touch.pageX - elm.left/2; // var x= touch.pageX - elem.width()/2 ; var y = touch.pageY - elm.top/2; $(this).css('left', x+'px'); $(this).css('top', y+'px'); }); </script>
//横竖屏切换事件 （有时你需要禁止横竖屏的自动切换，比如开发游戏。对于原生应用这很容易，但对于网页应用非常困难。）
<script>
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
}
}
document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
}
}
}
</script>
<script>
$(window).bind('orientationchange',function(event){
updateOrientation(event.orientation);//横屏时文字变为“LANDSCAPE”模式 ，竖屏时文字变为“PORTAIT”
})
function updateOrientation(orientation) {
$("#a").html("<p>"+orientation.toUpperCase()+"</p>");
}
</script>
//横竖屏切换小示例，竖屏下文字旋转90度，横屏下正常（竖屏下旋转90度其实就是想提示用户要横屏操作）
<!doctype html>
<html>
<head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link href="http://fonts.googleapis.com/css?family=Kranky:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: 'Kranky', serif;
font-size: 36px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>
</head>
<body>
<div id="screen">
<div id="loader">enter the game</div>
</div>
<script>
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
}
}
document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
}
}
}
window.onorientationchange = function() {
update();
}
function update() {
switch(window.orientation) {
case 0: // Portrait
case 180: // Upside-down Portrait
var cWidth = window.innerWidth;
var cHeight = window.innerHeight;
document.getElementById("screen").style.width = cHeight-36+'px';
document.getElementById("screen").style.height = cWidth+'px';
break;
case -90: // Landscape: turned 90 degrees counter-clockwise
case 90: // Landscape: turned 90 degrees clockwise
var cWidth = window.innerWidth;
var cHeight = window.innerHeight;
document.getElementById("screen").style.width = "100%";
document.getElementById("screen").style.height = "auto";
break;
}
}
update();
</script>
<script>
</script>
</body>
</html>
// 利用手势来旋转页面元素(iphone5测试没通过) ---监听ongesturechange事件，再利用css3 transform:rotate(0deg)原理
<script>
var rotation =0 ;
var node = document.getElementById('someElm');
node.ongesturechange = function(e){
var node = e.target;
//alert(e.rotation);
// scale and rotation are relative values,
// so we wait to change our variables until the gesture ends
node.style.webkitTransform = "rotate(" + ((rotation + e.rotation) % 360) + "deg)";
//alert("rotate(" + ((rotation + e.rotation) % 360) + "deg)");
}
node.ongestureend = function(e){
// Update the values for the next time a gesture happens
rotation = (rotation + e.rotation) % 360;
}
</script>
//利用滑动来创建图库，主要是用的jquery mobile的swipeleft,swiperight事件
<!doctype html> <html> <head> <title>Mobile Cookbook</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html, body { padding:0; margin:10px auto; } #checkbox { border:5px solid #ccc; width:30px; height:30px; } #wrapper { width:210px; height:100px; position:relative; overflow:hidden; margin:0 auto; } #inner { position:absolute; width:630px; } #inner div { width:200px; height:100px; margin:0 5px; background:#ccc; float:left; } .full-circle { background-color: #ccc; height: 10px; -moz-border-radius:5px; -webkit-border-radius: 5px; width: 10px; float:left; margin:5px; } .cur { background-color: #555; } #btns { width:60px; margin:0 auto; } </style> </head> <body> <header> </header> <div id="main"> <div id="wrapper"> <div id="inner"> <div></div> <div></div> <div></div> </div> </div> <div id="btns"> <div class="full-circle cur"></div> <div class="full-circle"></div> <div class="full-circle"></div> </div> </div> <footer> </footer> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> <script> var curNum = 0; $('#wrapper').swipeleft(function () { //alert('hi'); $('#inner').animate({ left: '-=210' }, 500, function() { // Animation complete. curNum +=1; $('.full-circle').removeClass('cur'); $('.full-circle').eq(curNum).addClass('cur'); }); }); $('#wrapper').swiperight(function () { $('#inner').animate({ left: '+=210' }, 500, function() { // Animation complete. curNum -=1; $('.full-circle').removeClass('cur'); $('.full-circle').eq(curNum).addClass('cur'); }); }); </script> </body> </html>
//利用手势操作图片缩放---当缩放手势触发，我们可以获取缩放的信息，并且基于此放大或缩小页面元素 event.scale
<script> var width = 100, height = 100; var node = document.getElementById('frame'); node.ongesturechange = function(e){ var node = e.target; node.style.width = (width * e.scale) + "px"; node.style.height = (height * e.scale) + "px"; alert(node.style.width); } node.ongestureend = function(e){ width *= e.scale; height *= e.scale; } </script>
延伸：
两指多点触摸，事件的触发顺序如下：（最好的例子：google map 、百度地图）
1 手指1的touchstart:当手指触摸到屏幕时触发 2 手指2的touchstart：当手指触摸到屏幕时触发 3 gesturestart:当第二个手指触摸屏幕时触发 4 gesturechange:当两个手指保持触摸并开始移动时触发 5 手指1的touchend:当第一根手指离开屏幕时触发 6 手指2的touchend:当第二根手指离开屏幕时触发，紧接着gestureend触发 7 gestureend:当第二根手指离开屏幕时触发
