css前端初始化

前言

当下移动端横行，平常我们做一些移动端的项目，接触最多的就是H5，虽然做移动端不用兼容IE，但是
我们要兼容微信、app、ios、android... 今天就给写几个平常开发经常会遇到的问题以及解决办法。

初入前端，若有不足 欢迎指正！

头部初始化

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta id=”viewport” name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<meta name=”MobileOptimized” content=”320″>
<meta name=”format-detection” content=”telephone=no”>

</head>

</html>

1.audio标签问题

一般要添加背景音乐的话，我们的第一反应就是使用audio标签，但是这里有一个坑。如果你的项目是一进页面就要播放音乐的话，audio标签在微信端是不生效的。这时候我们可以添加如下代码：

 document.addEventListener("WeixinJSBridgeReady", function () {
        audioAutoPlay(‘XXX’);//给一个全局函数
    },false);
    //兼容ios微信不能一打开就播放音乐
    function audioAutoPlay(id){ //全局控制播放函数
        var audio = document.getElementById(id),
            play = function(){
            audio.play();
        document.removeEventListener(“touchstart”,play,false);
            };
        audio.play();
        document.addEventListener(“touchstart”,play,false);
    }

原理：

我们给一它一个全局的函数，自动执行一次就可以了。

2.video标签问题

a. app里面不能控制随心所欲的控制视频的播放和暂停。

解决办法：

var video=$("#video")[0];
        $("#video").click(function(){
                  if($(this).hasClass("pls")){
                        video.play();
                  }else{
                        video.pause();
            }
            $("#video").toggleClass("pls")
        })

如果出现这种情况的话，我们就不能使用系统自带的控制播放和暂停的功能了，需要我们自己封装一段控制播放和暂停的方法出来。

b.微信端自动播放

<!-- 必须加在微信api资源 --> 
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
<script> 
  //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 
  document.getElementById('car_audio').play(); 
  //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 
  document.addEventListener("WeixinJSBridgeReady", function () { 
      document.getElementById('car_audio').play(); 
      document.getElementById('video').play(); 
  }, false); 
    //若是还不能解决，换成这样
    document.getElementById('video2').play();
    wx.getNetworkType({
         success: function (res) {
         console.log('res is',res);
             document.getElementById('video2').play();
         }
     });
</script>

3.弹出键盘问题

ios手机弹出键盘有时候会遮住输入框，给人一种很不爽的体验，但是这种情况很少出现。下面简单介绍一下解决办法：

 keyboardEvent:function($footer,winHeight){
    //这里默认软键盘的高度小于屏幕高度的二分之一
    $(window).resize(function(){
        var currentWinHeight = $(window).height();
        if(isInputsFocus($(‘input’)) && currentWinHeight < winHeight/1.2){
            //键盘弹出
            $footer.hide()
        }
        if(currentWinHeight >= winHeight/1.2){
            //键盘收起
            $footer.show()
        }
    });
}
Var isInputsFocus = function($inputs){
    if($inputs && $inputs.length > 0){
        for(var i=0;i<$inputs.length;i++){
            if($($inputs[i].is(“:focus”))){
                return true
            }
        }
        return false
    }
    return false
}

4.获取文档滚动高度

常用的获取方式是 document.documentElement.scrollTop 但是在手机上不生效。查了好久也不知道哪里有问题。后来偶然发现document.body.scrollTop 就生效了，但是PC又不行了，所以建议大家做一下判断

5.zepto获取select文本

我们平常使用的是

$("#select").val()//获取option的value值；
$("#select").find("option:selected").text()//获取option的文本

但是在使用zepto的时候竟然报错。研究好久不晓得是什么原因。后来查了下zepto的api 发现获取方法改了。现在是

$("#select option").not(function(){ return !this.selected }).val()//获取value值
$("#select option").not(function(){ return !this.selected }).text()//获取文本值

6.swiper图片超出父级盒子

给img添加

window.onload = function () {
    var u = navigator.userAgent;
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
        phoneType = 0;
    } else if (u.indexOf('iPhone') > -1) {//苹果手机
        phoneType = 1;
    } else if (u.indexOf('Windows Phone') > -1) {//winphone手机
        phoneType =2;
    }
};

7.帧动画的简单实现

var timeout = 1000; //每隔100ms
var index = 1;
var am,
  am = setInterval(function () {
      if (index >= $(".roll").length) {
          $(".roll").removeClass("run");
          clearInterval(am);
          $('.goinfo').removeClass('hide');
              console.log('res enter');
      } else {
          $(".roll").eq(index++).addClass("run");
      }
  }, timeout);

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}
a {
  text-decoration: none;
}
ul,ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {vert-align: top;} //移动端图片边框   相当于  border:0

a,
input,
button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
//-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0，去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android) 
input，textarea{outline:none}  
//取消chrome下默认的文本框聚焦样式

-webkit-appearance: none;
//消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 

-webkit-user-select: none;
// 禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整
input,
button {
  -webkit-appearance: none;
  border-radius: 0;
}
//去掉IOS移除原生控件样式

-webkit-touch-callout:none; 
// 禁用长按页面时的弹出菜单

body {
  margin: 0;
  -webkit-user-select: none;
}
//禁止移动端用户进行复制.选择.

body * {
  -webkit-user-select: none;
  font-family: Helvetica;
}

body {
  -webkit-text-size-adjust: 100%;
}
//移动端横竖屏字体乎大乎小

-webkit-text-size-adjust: none; 
//禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化)，此属性也不继承，一般加在body上规定整个body的文字都不会自动调整

css前端初始化

前言

头部初始化

1.audio标签问题

2.video标签问题

a. app里面不能控制随心所欲的控制视频的播放和暂停。

b.微信端自动播放

3.弹出键盘问题

4.获取文档滚动高度

5.zepto获取select文本

6.swiper图片超出父级盒子

7.帧动画的简单实现

酷酷的波

引用和评论

js面向对象编程

网页设计的垂直居中

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

Jerry和您聊聊Chrome开发者工具