html5移动开发入门知识

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta name="format-detection" content="telephone=no" />
<meta content="false" name="twcClient" id="twcClient" />

//提供的关于盒模型的几个属性：

box-orient           //子元素排列 vertical or horizontal
box-flex               //兄弟元素之间比例，仅作一个系数
box-align             //box 排列
box-direction       //box 方向
box-flex-group     //以组为单位的流体系数
box-lines            
box-ordinal-group   //以组为单位的子元素排列方向
box-pack

// 手势事件
touchstart            //当手指接触屏幕时触发
touchmove           //当已经接触屏幕的手指开始移动后触发
touchend             //当手指离开屏幕时触发
touchcancel
 
// 触摸事件
gesturestart          //当两个手指接触屏幕时触发
gesturechange      //当两个手指接触屏幕后开始移动时触发
gestureend
 
// 屏幕旋转事件   
onorientationchange     
 
// 检测触摸屏幕的手指何时改变方向       
orientationchange       
 
// touch事件支持的相关属性
touches         
targetTouches       
changedTouches              
clientX　　　　// X coordinate of touch relative to the viewport (excludes scroll offset)       
clientY　　　　// Y coordinate of touch relative to the viewport (excludes scroll offset)       
screenX　　　 // Relative to the screen        
screenY 　　  // Relative to the screen       
pageX　　 　　// Relative to the full page (includes scrolling)     
pageY　　　　 // Relative to the full page (includes scrolling)     
target　　　　 // Node the touch event originated from      
identifier　　   // An identifying number, unique to each touch event

<link rel=”apple-touch-startup-image” href=”startup.png” /> // 设置开始页面图片
<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> // 在设置书签的时候可以显示好看的图标
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">    // 肖像模式样式       
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"   // 风景模式样式
 
//竖屏时使用的样式 
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>
 
//横屏时使用的样式 
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style>  

// 判断屏幕是否旋转
function orientationChange() { 
    switch(window.orientation) { 
    　　case 0:  
            alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height); 
            break; 
    　　case -90:  
            alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height); 
            break; 
    　　case 90:    
            alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height); 
            break; 
    　　case 180:    
        　　alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height); 
        　　break; 
    };<br>};
// 添加事件监听 
addEventListener(‘load‘, function(){ 
    orientationChange(); 
    window.onorientationchange = orientationChange; 
});

// 双手指滑动事件
addEventListener(‘load‘,　　function(){ window.onmousewheel = twoFingerScroll;}, 
     false              // 兼容各浏览器，表示在冒泡阶段调用事件处理程序 (true 捕获阶段)
); 
function twoFingerScroll(ev) { 
    var delta =ev.wheelDelta/120;              //对 delta 值进行判断(比如正负) ，而后执行相应操作 
    return true; 
}; 

// 判断是否为 iPhone ： 
function isAppleMobile() { 
    return (navigator.platform.indexOf(‘iPad‘) != -1); 
}; 

var v = localStorage.getItem(‘n‘) ? localStorage.getItem(‘n‘) : "";   // 如果名称是  n 的数据存在 ，则将其读出 ，赋予变量  v  。 
localStorage.setItem(‘n‘, v);                                           // 写入名称为 n、值为  v  的数据 
localStorage.removeItem(‘n‘);                                           // 删除名称为  n  的数据    

<a href="tel:12345654321">打电话给我</a>
<a href="sms:12345654321">发短信</a>
或用于单元格：
<td onclick="location.href=‘tel:122‘">

ontouchmove="event.preventDefault()" //锁定viewport，任何屏幕操作不移动用户界面（弹出键盘除外）。

-webkit-tap-highlight-color: 颜色

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

@media screen and (max-device-width: 480px) {}

client / clientY：// 触摸点相对于浏览器窗口viewport的位置 
pageX / pageY：// 触摸点相对于页面的位置 
screenX /screenY：// 触摸点相对于屏幕的位置