css前端初始化

时间 2019-11-08

标签 css 前端初始化栏目 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标签在微信端是不生效的。这时候咱们能够添加以下代码：html

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里面不能控制为所欲为的控制视频的播放和暂停。

解决办法：android

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手机弹出键盘有时候会遮住输入框，给人一种很不爽的体验，可是这种状况不多出现。下面简单介绍一下解决办法：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文本

咱们日常使用的是web

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

可是在使用zepto的时候居然报错。研究很久不晓得是什么缘由。后来查了下zepto的api 发现获取方法改了。如今是chrome

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

6.swiper图片超出父级盒子

给img添加api

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的文字都不会自动调整