css前端初始化

mikyou 发布于2019-08-29 16:19 / 2998人阅读

摘要：初入前端，若有不足欢迎指正头部初始化标签问题一般要添加背景音乐的话，我们的第一反应就是使用标签，但是这里有一个坑。

前言

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

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

头部初始化

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.微信端自动播放

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

GPU云服务器云服务器前端css css前端前端css框架浮动-前端-css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113670.html

前端开发篇——浏览器默认样式及css初始化

摘要：为什么要初始化建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对初始化往往会出现浏览器之间的页面差异。当然，初始化样式会对有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。为什么要初始化css? 建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器...

luoyibu 2019-08-30 13:21 评论0 收藏0
前端开发篇——浏览器默认样式及css初始化

摘要：为什么要初始化建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对初始化往往会出现浏览器之间的页面差异。当然，初始化样式会对有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。为什么要初始化css? 建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器...

dunizb 2019-08-01 16:10 评论0 收藏0
前端面试题-CSS选择器性能优化

摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...

Scott 2019-08-30 14:08 评论0 收藏0
前端面试题-CSS选择器性能优化

摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...

XGBCCC 2019-08-01 18:42 评论0 收藏0
从零开始做Vue前端架构（1）

摘要：前言想想也已经做过不少架构的项目了，有基于，基于，基于，基于的。好了，介绍完毕，接下来，我就从零开始，一步一步建起前后端完全分离的前端架构了。前言想想也已经做过不少架构的项目了，有基于vue，基于react，基于thinkPHP，基于laravel的。做多了，也就对现有的架构有各种想法，有好的，有坏的，总之，用起来还是不爽。vue-cli虽然可以很快地构建并使用，尤其是vue-c...

frolc 2019-06-24 17:56 评论0 收藏0
360前端星学习笔记-深入css(2)

摘要：课程一继承某些元素会自动继承其父元素的计算值举例上述代码，标签里的就会继承父元素的，为。显示继承给设置显示继承根元素下所有元素除独自设置如的都是。二初始值当向上继承到顶点还是没找到值的话，就需要初始值了。课程ppt 一、css继承 1.1 某些元素会自动继承其父元素的计算值举例： This is a test of inherit. p { color: #666; ...

William_Sang 2019-08-29 15:38 评论0 收藏0