常见问题Q&A - Githubissues

NPLUSWEB commented 6 years ago

Q：动画卡顿、不流畅

A：1、js动画换成css3动画 2、减少DOM操作 3、使用translate3d等3d属性来开启GPU渲染动画 4、适当减少不必要动画

Q：translate3d等3d属性渲染动画后出现白屏或闪屏

A：对使用3d属性标签添加样式backface-visibility:hidden;-webkit-backface-visibility:hidden;

Q：点击元素出现阴影或遮罩

A：对点击元素添加样式 -webkit-tap-highlight-color:rgba(255,255,255,0);

Q：点击元素出现边框

A：对点击元素添加样式 outline: none;

Q：input、textarea输入框出现怪异内阴影

A：对元素添加样式 appearance:none;-webkit-appearance:none;

Q：去掉select标签默认箭头

A：对select添加样式 appearance:none;-webkit-appearance:none;

Q：IOS长按识别二维码BUG

A：在页面顶层覆盖一层透明度为0的图片，touchstart显示，touchend隐藏

Q：事件穿透（穿透层级高的元素，让层级低的元素可以响应事件）

A：pointer-events:none;

Q：Ios滚动不流畅

A：-webkit-overflow-scrolling:touch;

Q：overflow:scroll或overflow:auto滚动条样式

::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去） ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处 ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

Q：ios双击页面的时候页面会向上弹一下

//解决ios双击页面上移问题
//在项目中测试不紧input/button这些表单控件有这个问题，p,div等也有问题，于是乎就直接在body开刀了
(function(){
    var agent = navigator.userAgent.toLowerCase();        //检测是否是ios
    var iLastTouch = null;                                //缓存上一次tap的时间
    if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){
        document.body.addEventListener('touchend', function(event){
            var iNow = new Date()
                .getTime();
            iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;
            var delta = iNow - iLastTouch;
            if (delta < 500 && delta > 0){
                event.preventDefault();
                return false;
            }
            iLastTouch = iNow;
        }, false);
    }
})();

//下面是国外coder给的解决方案
//http://appcropolis.com/blog/howto/implementing-doubletap-on-iphones-and-ipads
(function($){
    // Determine if we on iPhone or iPad
    var isiOS = false;
    var agent = navigator.userAgent.toLowerCase();
    if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){
           isiOS = true;
    }
    $.fn.doubletap = function(onDoubleTapCallback, onTapCallback, delay){
        var eventName, action;
        delay = delay == null? 500 : delay;
        eventName = isiOS == true? 'touchend' : 'click';
        $(this).bind(eventName, function(event){
            var now = new Date().getTime();
            var lastTouch = $(this).data('lastTouch') || now + 1 /** the first time this will make delta a negative number */;
            var delta = now - lastTouch;
            clearTimeout(action);
            if(delta<500 && delta>0){
                if(onDoubleTapCallback != null && typeof onDoubleTapCallback == 'function'){
                    onDoubleTapCallback(event);
                }
            }else{
                $(this).data('lastTouch', now);
                action = setTimeout(function(evt){
                    if(onTapCallback != null && typeof onTapCallback == 'function'){
                        onTapCallback(evt);
                    }
                    clearTimeout(action);   // clear the timeout
                }, delay, [event]);
            }
            $(this).data('lastTouch', now);
        });
    };
})(Zepto);
//usage:
$(selector).doubletap(
    /** doubletap-dblclick callback */
    function(event){
        alert('double-tap');
    },
    /** touch-click callback (touch) */
    function(event){
        alert('single-tap');
    },
    /** doubletap-dblclick delay (default is 500 ms) */
);
//下面是国外coder给的解决方案--end
//解决ios双击网面上移问题--end

Q：移动端p标签字体大小失控

A：P标签设置max-height：100%

Q：pc端video标签播放m3u8视频流

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://www.streambox.fr/playlists/test_001/stream.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>

Q：ios微信禁止改变字体大小

A：text-size-adjust: 100% !important; -webkit-text-size-adjust: 100% !important;

Q：Canvas画文字，中文英文数字占宽不一样

A：将文字拆分成单个字符，计算每个字符宽度，字符宽度依次相加，宽度达到文字区域宽度后拆分成数组，对拆分好的数组内容依次画到画布。代码如下:

var app = {
    cutString (str) {
        var len = str.length;
        var arr = [];
        var strArr = str.split('');
        var i = 0;
        var s = '';
        var arrIndex = 0;
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = canvas.height = 600;
        ctx.font = '26px Arial';
        for(var x = 0; x < len; x++){
            var text = strArr[x];
            i += ctx.measureText(text).width;
            s += text;
            console.log(i);
            arr[arrIndex] = s;
            if (i >= 480) {
                arrIndex++;
                i = 0;
                s = '';
            }
        }
        return arr;  
    },
    draw () {
        var _this = this;
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = 720;
        canvas.height = 1148;

        ctx.font = '26px Arial';
        ctx.fillStyle = '#666666';
        var startleft = 115;
        var starttop = 485;
        var lineheight = 40;
        var arr = _this.cutString(_this.msg);
        for(var i = 0; i < arr.length; i++){  
            var t = arr[i];
            ctx.fillText(t, startleft, i * lineheight + starttop);
        }
    }
}

Q：input file调取相机没反应

A：检查应用是否开启允许调用摄像头

sanghb commented 6 years ago

Q：javascript:history.go(-1)返回上一页面，页面不刷新

A：window.location.href = document.referrer; referrer 属性可返回载入当前文档的文档的 URL，如果当前文档不是通过超级链接访问的，则为 null。

zyin1-2 commented 6 years ago

Q：border-radius遇到transform,overflow:hidden失效

A：在父类中用mask-image -webkit-mask-image:url(../img/zhez.png); -webkit-mask-size: 5.22rem 5.22rem; 原文http://blog.csdn.net/w20101310/article/details/52298636

Q：动态生成元素的点击事件$(document).on("click",function(){})在andriod设备和电脑浏览器模拟上可以触发，而在apple移动设备上却无法触发。

A：给点击的元素的css加cursor: pointer

Q：上传图片插件在有些手机中只显示拍照不显示相册

A：去掉input中的capture="camera"

Q：在页面中文字增加到一定数量，或者文字大小设置为某一个值时，页面中的文字字号会突然变大，超出自己设置的字号大小。例如虽然我设置的字号大小是24px，但是在computed下却是28.7px

A：在css中加body *{ max-height: 999999px; }

Q：背景图在一些安卓手机上会显示图片少了1px

A：有可能是切的图是图片本身大小，给背景图画布大小加一像素

zyin1-2 commented 5 years ago

Q：webpack打包后-webkit-box-orient被移除

A：方法一: 添加注释关闭autoprefixer,但是若果有清除注释的插件,请将该插件设为false,否则不生效 / autoprefixer: off / -webkit-box-orient: vertical; / autoprefixer: on / 方法二:将autoprefixer设置为false,或者只是将移除功能关闭 autoprefixer:{remove:false} 原文：https://blog.csdn.net/screaming_color/article/details/80915154

Q: vue离开页面清除定时器(vue路由变化后，计时器还在执行，怎么清除计时器)

A: destroyed(){ if(this.timer) { //如果定时器在运行则关闭 clearInterval(this.timer); } } 原文：https://blog.csdn.net/weixin_39494582/article/details/79879282

Q:微信返回强制刷新页面（vue页面跳转外链后再返回不刷新（苹果机））

A:1、IOS上的方法方法1 $(function () { var isPageHide = false; window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(); } }); window.addEventListener('pagehide', function () { isPageHide = true; }); });

方法2 $(function () { window.addEventListener("popstate", function(e) { self.location.reload(); }, false); var state = { title : "", url : "#" }; window.history.replaceState(state, "", "#"); }); 原文：https://www.jianshu.com/p/5cf5283f2d4f

NPLUSWEB / nplusweb.github.io

常见问题Q&A #4