WebApp前端常用属性总结

width - device-width(设备的的宽度)，height - device-height(设备的的的高度),initial-scale - 初始的缩放比例,minimum-scale - 允许用户缩放到的最小比例, maximum-scale - 允许用户缩放到的最大比例,user-scalable - 用户是否可以手动缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

隐藏系统默认的工具栏和菜单栏

这meta的作用就是隐藏系统默认的工具栏和菜单栏，content有两个值”yes”和”no”，此参数如果要有效果，需要用户提前添加快捷方式到桌面。

<meta name="apple-mobile-web-app-capable" content="yes">

APP启动的状态栏颜色

content=“color”，color的可选值有black，default，black-translucent

<meta name="apple-mobile-web-app-status-bar-style" content="black">

禁止设备把页面上的数字识别成电话号码

<meta content="telephone=no" name="format-detection">

为按钮添加touch状态，也就是类个高端大气上档次的 active状态

:active这个高端洋气的CSS伪类状态在WEB页面开发中已经很常用了。但可惜的是，iOS和Android都没有在手机端实现这个状态。不过我们总是有曲线救国的办法的不是么，找到替代的解决方案并不难，只要在JavaScript中增加下述事件就可以监听到:active状态啦。

document.addEventListener("touchstart",function(){}, true)

不过在IOS6以上的系统中也可以直接使用CSS来实现

button:active{....}

禁用webkit浏览器的默认样式

你是否也觉得webkit上边对input，button，以及select下拉框的默认样式感到恶心，没关系我们禁用掉它，然后自定义

-webkit-appearance:none; 

去掉设备按钮点击产生的白色背景

-webkit-tap-highlight-color:rgba(0,0,0,0);

面板如果设置宽度，请加上box-sizing属性

box-sizing 可选属性 box-sizing：content-box | border-box

CSS检测横竖屏状态

//竖屏时使用的样式
<style media="all and (orientation:portrait)" type="text/css">
body {color:red; }
</style>
 
//横屏时使用的样式
<style media="all and (orientation:landscape)" type="text/css">
body {color:white; }
</style>

使用符合触摸设备的冲量滚动属性

你是否有过在手机站点上下拉滚动条的时候，感觉有很卡或很慢的情况啊。Android3+和iOS5+支持CSS的新属性为overflow-scrolling，可实现冲量滚动，然后一切都变得美好起来……

 

左侧有冲量滚动，右侧无冲量滚动

这样的动态效果一出来，马上就有too native的感觉啦。只要在滚动条上增加下述属性即可实现。

-webkit-overflow-scrolling:touch;

禁用按钮长按效果

-webkit-touch-callout: none属性能有效禁止Mobile Safari中的长按效果。但如果换成Android，那就需要多做一点工作了。长按手势可用于提取图标（比如重排图标位置、顺序）与显示更多选项。

-webkit-touch-callout: none

如果页面有动画效果，尽量使用CSS3中的过度和变换效果 Animations(动画)，Transitions(过渡)

移动设备事件

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

隐藏移动设备浏览器的地址栏

有2种方法来隐藏浏览器地址栏，下边是第一种大家都知道的，其思路就是footer和header固定 中间的部分滚动

addEventListener('load', function(){ 
        setTimeout(function(){ window.scrollTo(0, 1); }, 100); 
});

第二种方法比较高级，除了浏览器底部工具栏不能隐藏之外头部工具栏你可以完美隐藏，应用看上去更像是app，但此方法仅适合IOS7以下的设备

//模拟全屏APP效果
window.addEventListener("load",function() {setTimeout(function(){hideAddressbar()},0)}); 
function runAddressBarCheck(activeHeight){
  setTimeout(function(){
    if(activeHeight != window.innerHeight){
       setTimeout(function(){
        scrollTo(0,0);
        runAddressBarCheck(window.innerHeight);
       }, 2000);
    } else {
      runAddressBarCheck(activeHeight);
    }
  }, 500);
}
function hideAddressbar(){
  var page = document.getElementById('pages'),
      ua = navigator.userAgent,
      iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
      fullscreen = window.navigator.standalone,
      lastWidth = 0;
    if (iphone) {    
      window.setupScroll = window.onload = function() {
        var height = document.documentElement.clientHeight;               
        if (iphone && !fullscreen) height += 60;       
        page.style.height = height + 'px';       
        setTimeout(scrollTo, 0, 0, 1);       
      };
      (window.onresize = function() {        
        var pageWidth = page.offsetWidth;
        if (lastWidth == pageWidth) return;
        lastWidth = pageWidth;
        setupScroll();
      })();
      
      runAddressBarCheck(window.innerHeight);
  };
}  

注：使用时请在最外层的标签上加上 pages这个ID 当然你也可以换成其它

设备旋转事件：onorientationchange

添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋），example：

// 判断屏幕是否旋转
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; 
    };
};
// 添加事件监听 
addEventListener('load', function(){ 
    orientationChange(); 
    window.onorientationchange = orientationChange; 
});

双手指滑动事件

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

使用特殊的连接

如果你关闭页面号码自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接 ,

<a href="tel:[phone]">打电话给我</a>
<a href="sms:12345654321">发短信</a>
<a href="mailto:[e-mail]">发邮件给我</a>
你还可以直接写好邮件内容，连接参数为：
//mailto:[e-mail]?cc=[e-mail]&subject=Greetings%20from%20Cupertino!&body=Wish%20you%20were%20here
//参数说明 cc 邮件抄送地址 ，subject 主题 ，body 邮件正文

与本文相关的内容：

• 移动网页开发利用PHP,JS检测移动设备类型
• 前端开发常见设备尺寸参考

关注微信公众号：前端开发知识

原文地址：http://www.16code.com/webapp%E5%89%8D%E7%AB%AF%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7%E6%80%BB%E7%BB%93/