移动端实用技巧

1、改变placeholder颜色     ::-webkit-input-placeholder{color:#ffffff;}

2、取消移动端点击闪屏问题   -webkit-tap-highlight-color:rgba(0,0,0,0)

3、解决select在android中无法改变背景色    -webkit-appearance:none;

4、获取url参数 location.search.match(/type=[\w-]+/i)[1]

5、ios下网页在快速滚动和回弹的原理：iOS 5.0 之后定义了scroll元素  -webkit-overflow-scrolling : touch;

6、移动端字体 font-family: Arial, Helvetica, sans-serif; 

7、移动头部
<meta name="msapplication-tap-highlight" content="no"/>
    <meta charset="utf-8"/>
    <meta name="viewport" content="target-densitydpi=device-dpi,width=640, user-scalable=0, user-scalable=no" id="viewport">
    <meta name="Keywords" content=""/>
    <meta name="Description" content=""/>
    <meta content="telephone=no" name="format-detection"/>

   <script>
        var isIos = navigator.userAgent.match(/iphone|ipod|ipad/ig);
        if(isIos){
            document.getElementById("viewport").setAttribute('content','target-densitydpi=device-dpi,width=640, maximum-scale='+window.screen.width/640);
        }
    </script>

8、移动、PC地址转向
   if (navigator.userAgent.search(/iphone|ipod|ipad|Android|Windows Phone/ig)>=0) {
          if(window.location.href.search(/lgd\_wap/)<0){
            window.location = '../lgd_wap/';
          }
   }else{
          if(window.location.href.search(/lgd\_wap/)>=0){
            window.location = '../lgd/';
          }
   };

9、//音乐播放

var flag = false;
var playMusic = $('#mp3');
$(document).on('touchstart', function(){
if (!flag) {
playMusic[0].play();
$('.music').addClass("play");
flag = true;
}
});
$('.music').click(function(){
if(!playMusic[0].paused){
playMusic[0].pause();
$('.music').removeClass("play");
}else{
playMusic[0].play();
$('.music').addClass("play");
}
});

10、移动端横竖屏使用样式

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

11、解决iPhone不会出现滚动条的问题
-webkit-overflow-scrolling: touch;
样式后，就完全可以抛弃第三方类库了，把它加在body{}区域，
所有的overflow需要滚动的都可以生效了。

12、判断 pc wap  平台
  if (navigator.userAgent.search(/iphone|ipod|ipad|Android|Windows Phone/ig)>=0) {
        var flag = location.search.match(/[?|&]flag=([\w]+)/i);
        var musicCode = location.search.match(/[?|&]code=([\w]+)/i);
        if(window.location.href.search(/morewarm\-wap/)<0){
          if(flag){
             window.location = './morewarm-wap/?flag='+flag[1];
          }else if(musicCode){
              window.location = './morewarm-wap/?code='+musicCode[1];
          }else{
             window.location = './morewarm-wap/';
          }
        }
      }else{
        if(window.location.href.search(/morewarm\-wap/)>=0){
          window.location = '../morewarm/';
        }
      }

13、// 横屏监听
var updateOrientation = function(){
if(window.orientation=='-90' || window.orientation=='90'){
$('.landscape-wrap').removeClass('hide');
console.log('为了更好的体验，请将手机/平板竖过来！');
}else{
$('.landscape-wrap').addClass('hide');
console.log('竖屏状态');
}
};
window.onorientationchange = updateOrientation;