移动端网页开发的一些解决方法【转】

时间 2019-12-09

标签移动网页开发一些解决方法栏目无线繁體版

原文原文链接

网上看到一片好文，转载保留

高性能 CSS3 动画

尽量的让动画元素不在文档流中，以减小重排javascript

 
        position 
        :  
        fixed 
        ; 
       
        position 
        :  
        absolute 
        ;

尽量多的利用硬件能力，如使用3D变形来开启GPU加速php

 
   
    
      
        -webkit-transform: translate3d( 
        0 
        ,  
        0 
        ,  
        0 
        ); 
       
 
        -moz-transform: translate3d( 
        0 
        ,  
        0 
        ,  
        0 
        ); 
       
 
        -ms-transform: translate3d( 
        0 
        ,  
        0 
        ,  
        0 
        ); 
       
 
        transform: translate3d( 
        0 
        ,  
        0 
        ,  
        0 
        ); 
       
 
    
 
   
 

如动画过程有闪烁（一般发生在动画开始的时候），能够尝试下面的Hack：css

 
        -webkit-backface- 
        visibility 
        :  
        hidden 
        ; 
       
        -moz-backface- 
        visibility 
        :  
        hidden 
        ; 
       
        -ms-backface- 
        visibility 
        :  
        hidden 
        ; 
       
        backface- 
        visibility 
        :  
        hidden 
        ; 
       
        -webkit-perspective:  
        1000 
        ; 
       
        -moz-perspective:  
        1000 
        ; 
       
        -ms-perspective:  
        1000 
        ; 
       
        perspective:  
        1000 
        ;

尽量少的使用box-shadows与gradients
box-shadows与gradients每每都是页面的性能杀手，尤为是在一个元素同时都使用了它们。html

消除 `transition`闪屏

两个方法java

 
        -webkit-transform-style: preserve-3d; 
       
        /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ 
       
        -webkit-backface- 
        visibility 
        :  
        hidden 
        ; 
       
        /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

高频触发事件采用事件节流或加以控制

好比要绑定一个touchmove的事件，正常的状况下相似这样android

 
        $( 
        'div' 
        ).on( 
        'touchmove' 
        ,  
        function 
        (){ 
       
        //.….code 
       
        });

而若是中间的code须要处理的东西多的话，FPS就会降低影响程序顺滑度，而若是改为这样ios

 
        $( 
        'div' 
        ).on( 
        'touchmove' 
        ,  
        function 
        (){ 
       
        setTimeout( 
        function 
        (){ 
       
        //.….code 
       
        },0); 
       
        });

把代码放在setTimeout中，会发现程序变快.css3

移动端 HTML5 audio autoplay 失效问题

因为自动播放网页中的音频或视频，会给用户带来一些困扰或者没必要要的流量消耗，因此苹果系统和安卓系统一般都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才能够播放。web

解决方法思路：先经过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操做就没问题了）。api

 
        document.addEventListener( 
        'touchstart' 
        ,  
        function 
        () { 
       
        document.getElementsByTagName( 
        'audio' 
        )[0].play(); 
       
        document.getElementsByTagName( 
        'audio' 
        )[0].pause(); 
       
        });

利用`padding`或`margin`得百分比特性作响应式元素

padding 和 margin得 top 和 bottom值设置百分比参数，百分比是相对于宽度计算得距离，利用此特性有助于移动端定位元素位置。

使伪类`:active`生效

要CSS伪类 :active 生效，只须要给 document 绑定 touchstart 或 touchend 事件解决方法：加入下方js，激活:active。

 
        document.addEventListener( 
        'touchstart' 
        , 
        function 
        (){}, 
        false 
        );

添加分享到朋友圈缩略图

微信分享连接时，自动抓取缩略图方法：须要一张300*300的图片, 并添加在 body 下，微信会自动抓取这张图来做为缩略图显示，格式以下：

 
        < 
        div 
        id 
        = 
        "wx_pic" 
        style 
        = 
        "display:none;" 
        > 
       
 
           
        < 
        img 
        src 
        = 
        "http://www0.autoimg.cn/topic/2015/3/peugeot3008/m/assets/images/share.jpg" 
        > 
       
 
        </ 
        div 
        > 
       

iOS Safari 委托在`document`的事件失效

Safari 对click事件定义只能冒泡到body下面的子节点，因此委托在document上得click事件不会被触发！
解决方法为body得子节点添加click事件既能够解决。

 
        $( 
        "body" 
        ).children().click( 
        function 
        () {});

iOS Safari 双击后事件失效bug

bug 出如今弹出层双击空白区域后，浏览器scroll下移一部分，页面点击事件失效。
解决方法：弹出层禁止touchstart；

小米内置浏览器 `z-index` 失效

小米内置浏览器z-index失效多数产生在具备css3动画，或者设置translate3d属性的场景下。
解决方法: 为想要提高的层级添加tanslate3d(0,0,0)后在设置z-index解决。

Android手机`$(window).width()` Bug

部门安卓手机经过Zepto.js提供得 $(window).width(); $(window).height()获取浏览器视图宽度与实际宽度不一致。
解决方法：经过document.documentElement.clientWidth 获取宽度。

 
        var 
        pageWidth = document.documentElement.clientWidth; 
       
        var 
        pageHeight = document.documentElement.clientHeight;

魅族内置浏览器动态修改`className`渲染失效

魅族内置浏览器 js修改页面元素className 后渲染失效，问题出如今display:block; 和部门css3样式;
解决办法：触发scroll强制浏览器重绘。

 
        document.body.scrollTop = 2; 
       
        document.body.scrollTop = 0;

关于iOS系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

能够经过正则去掉

 
        this 
        .value =  
        this 
        .value.replace(/\u2006/g,  
        '' 
        );

关闭iOS键盘首字母自动大写

在iOS中，默认状况下键盘是开启首字母大写的功能的，若是启用这个功能，能够这样：

 
        < 
        input 
        type 
        = 
        "text" 
        autocapitalize 
        = 
        "off" 
        >

ios中去掉元素被触摸时产生的半透明灰色遮罩

ios用户点击一个连接，会出现一个半透明灰色遮罩, 若是想要禁用，可设置`-webkit-tap-highlight-color`的alpha值为0，也就是属性值的最后一位设置为0就能够去除半透明灰色遮罩

 
        a,button,input,textarea{-webkit-tap-highlight- 
        color 
        : rgba( 
        0 
        , 
        0 
        , 
        0 
        , 
        0 
        ;)}

去掉Android中元素被点击时产生的边框

android用户点击一个连接，会出现一个边框或者半透明灰色遮罩, 不一样生产商定义出来额效果不同，可设置`-webkit-tap-highlight-color`的alpha值为0去除部分机器自带的效果

 
        a,button,input,textarea{ 
       
        -webkit-tap-highlight- 
        color 
        : rgba( 
        0 
        , 
        0 
        , 
        0 
        , 
        0 
        ;) 
       
        -webkit-user-modify:read-write-plaintext-only; 
       
        }

-webkit-user-modify有个反作用，就是输入法再也不可以输入多个字符
另外，有些机型去除不了，如小米2
对于按钮类还有个办法，不使用a或者input标签，直接用div标签

去除移动端输入框内阴影

在iOS上，输入框默认有内部阴影，但没法使用 box-shadow 来清除，若是不须要阴影，能够这样关闭：

 
        input, 
       
        textarea { 
       
        border 
        :  
        0 
        ;  
        /* 方法1 */ 
       
        　　-webkit-appearance:  
        none 
        ;  
        /* 方法2 */ 
       
        }

移动端禁止选中内容

若是你不想用户能够选中页面中的内容，那么你能够在css中禁掉：

 
        .user-select- 
        none 
        { 
       
        -webkit-user-select:  
        none 
        ;   
        /* Chrome all / Safari all */ 
       
        -moz-user-select:  
        none 
        ;      
        /* Firefox all （移动端不须要） */ 
       
        -ms-user-select:  
        none 
        ;       
        /* IE 10+ */      
       
        }

手机拍照和上传图片

 
        <!-- 选择照片 --> 
       
        < 
        input 
        type 
        = 
        "file" 
        accept 
        = 
        "image/*" 
        > 
       
        <!-- 选择视频 --> 
       
        < 
        input 
        type 
        = 
        "file" 
        accept 
        = 
        "video/*" 
        >

使用总结：
ios 有拍照、录像、选取本地图片功能
部分android只有选取本地图片功能

伪元素css3动画失效

在安卓微信内置浏览器中，对一个伪元素作css3动画失效。

解决方法：
不用伪元素，换成标签。

webview中viewport固定宽度全屏显示方法

因为一些移动端游戏或互动形式布局（元素）须要固定大小，又须要自适应屏幕，
能够经过设置视口宽度等于固定值让浏览器自动缩放页面的方法来实现。

 
        < 
        meta 
        name 
        = 
        "viewport" 
        content 
        = 
        "width=640,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=1,maximum-scale=1,user-scalable=1" 
        >

其中的width=640就是网页内容区的宽度，须要在不一样手机上恰好全屏显示，target-densitydpi=device-dpi设置后，css中的1px就会等于物理像素中的1px。
补充：因为safari浏览器不支持 target-densitydpi = device-dpi，因此加入JS代码自动调整缩放比例，调整后的代码：

 
   
    
      
        < 
        meta 
        name 
        = 
        "viewport" 
        id 
        = 
        "WebViewport" 
        content 
        = 
        "width=640,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=no" 
        >  
       

           
       
 
        < 
        script 
        language 
        = 
        "javascript" 
        >  
       
 
           
        if(screen.width <  
        640 
        ) {  
       
 
             
        document.getElementById('WebViewport').setAttribute('content', ' 
        width 
        = 
        640 
        , 
        initial-scale 
        = 
        ' + screen.width / 640 + ' 
        , 
        target-densitydpi 
        = 
        device 
        -dpi, 
        minimum-scale 
        = 
        0 
        .1, 
        maximum-scale 
        = 
        1 
        , 
        user-scalable 
        = 
        no 
        ');  
       
 
           
        }  
       
 
        </script>  
       
 
    
 
   
 

三星note2（低版本系统手机）css3动画fadeIn致使div内滚动闪屏

bug描述：页面渐入动画fadeIn，致使设置 fixed 属性的div内滚动闪屏，滑动后背景闪白，受影响手机可到note4，但闪烁频率没有那么高。

 
        @keyframes fadeIn { 
       
        0% {opacity: 0;} 
       
        100% {opacity: 1;} 
       
        } 
       
        animation: fadeIn .6s both;

解决方法：去掉全部淡入效果，或者针对三星手机去掉css3动画，或者弹出层不要有滚动条。

Listview 太长引发的手机性能问题

问题表现：
内存中存留的DOM结构太多，致使滚动的 Listview 后面，点击响应会延迟，甚至无响应。

解决方法是:
1.在 li 外面包裹一层，将前面页码的 dom 移除，同时设置外层容器的高度（这样不至于影响滚动条）
2.下拉滚动翻页过程当中，对以前页码的数据进行隐藏。
获取最后一个隐藏的元素，获得隐藏的页码，判断后2页中的第5条数据是否在屏幕中。

 
        var 
        $lastHidden = $teacherList.find( 
        'li[data-show="hidden"]' 
        ).last(), 
       
        lastHiddenPage = $lastHidden.data( 
        'page' 
        ); 
       
        var 
        $midle = $teacherList.find( 
        'li[data-page="' 
        + (lastHiddenPage + 2) +  
        '"]' 
        ).eq(4); 
       
        if 
        ($midle && $midle.offset() && $midle.offset().top > $(document.body).scrollTop()){ 
       
        // 页面中最后一个元素显示在屏幕中 
       
        // problem: 向上滑动过快，这里有卡顿 
       
        $teacherList.find( 
        'li[data-page="' 
        + lastHiddenPage +  
        '"]' 
        ).css( 
        'visibility' 
        ,  
        'visible' 
        ).data( 
        'show' 
        ,  
        'visible' 
        ); 
       
        }

IOS 5+快速回弹滚动问题

问题表现：
IOS5新特性webkit-overflow-scrolling: touch能够启动快速回弹滚动（fast bounce-scroll）效果，可是它会阻止渲染直到滚动结束。

影响: 1.从不滚动状态到滚动状态（反之亦然），由于要先初始化滚动状态才开始渲染，虽然很短暂，但也是有delay的，因此出现闪屏
2.列表滚动过程当中，须要等到滚动结束以后，后面的元素才会渲染出来

解决方法是:
1.启动硬件加速，能够用-webkit-transform: translate3d(0,0,0)，这个hack能够解决大部分问题
2.用min-height，直接杜绝滚动状态改变，从而防止闪屏问题（已解决详情页闪屏问题）

华为mate7 图片点击放大问题

问题表现：
华为mate7中，img限制宽高，而且图片实际尺寸大于限制尺寸，单用户点击时，图片会弹层并被放大。

解决方法是:
添加css样式：pointer-events: none; 使图片点透。

转自：http://qingui.uis.cc/experience.php