移动webAPP前端开发代码演示和技巧汇总

width -             //  viewport 的宽度 （范围从200 到10,000，默认为980 像素）
height -            //  viewport 的高度 （范围从223 到10,000）
initial-scale -     //  初始的缩放比例 （范围从>0 到10）
minimum-scale -    //   允许用户缩放到的最小比例
maximum-scale -    //   允许用户缩放到的最大比例
user-scalable -    //   用户是否可以手动缩 (no,yes)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">   //编码
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>
<meta name=”apple-mobile-web-app-capable” content=”yes” />  // 离线应用的另一个技巧    
<meta name=”apple-mobile-web-app-status-bar-style” content=black” />  // 隐藏状态栏       
<meta content="black" name="apple-mobile-web-app-status-bar-style" /> //指定的iphone中safari顶端的状态条的样式       
<meta content="telephone=no" name="format-detection" />       //告诉设备忽略将页面中的数字识别为电话号码     
<meta name="Author" contect="Mr.He"/ > 

<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> 

// 手势事件
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

// 判断屏幕是否旋转
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(){
        setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});

// 双手指滑动事件
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‘">

<input type="text" autocapitalize="off" autocorrect="off" />