大奖18dj18vip-大奖18dj18娱乐官网

助力产业智慧升级,云服务器首年88元起,更有千元代金券礼包免费领!

大奖18dj18vip

查看: 93|回复: 0
打印 上一主题 下一主题

[移动开发] 移动端常见bug汇总

[复制链接]
  • TA的每日心情
    擦汗
    3 天前
  • 签到天数: 550 天

    [LV.9]以坛为家II

    硕士生

    1万

    主题

    1万

    帖子

    3万

    积分

    Rank: 8Rank: 8

    UID
    15343
    威望
    -561
    贡献
    7964
    在线时间
    245 小时
    注册时间
    2015-10-12
    跳转到指定楼层
    楼主
    发表于 2019-8-15 15:14:55 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    推广者专属福利,新客户无门槛领取总价值高达2775元代金券,每种代金券限量500张,先到先得。

    Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。

    A:根本原因是-webkit-tap-highlight-color,这个属性是用于设定元素在移动设备(如Adnroid、iOS)上被触发点击事件时,响应的背景框的颜色。建议写在样式初始化中以避免所以问题:div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);}另外出现蓝色边框:outline:none;

    /*i.e . Nexus5/Chrome and Kindle Fire HD 7 ''*/-webkit-tap-highlight-color : rgba (255, 255, 255, 0);-webkit-tap-highlight-color : transparent ;

    屏蔽用户选择

    Q: 禁止用户选择页面中的文字或者图片

    A:代码如下

    -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;

    移动端如何清除输入框内阴影

    Q: 在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:

    A:代码如下

    -webkit-appearance: none;

    禁止文本缩放

    Q: 禁止文本缩放

    A:代码如下

    -webkit-text-size-adjust: 100%;

    用户设置字号放大或者缩小导致页面布局错误

    body{      -webkit-text-size-adjust: 100% !important;      text-size-adjust: 100% !important;      -moz-text-size-adjust: 100% !important;  }

    如何禁止保存或拷贝图像

    Q: 如何禁止保存或拷贝图像

    A:代码如下

    img{    -webkit-touch-callout: none;}

    解决字体在移动端比例缩小后出现锯齿的问题

    Q: 解决字体在移动端比例缩小后出现锯齿的问题

    A:代码如下

    -webkit-font-smoothing: antialiased;

    设置input里面placeholder字体的大小

    ::-webkit-input-placeholder{ font-size:10pt;}

    audio元素和video元素在ios和andriod中无法自动播放

    Q: audio元素和video元素在ios和andriod中无法自动播放

    A:代码如下,触屏及播放

    $('html').one('touchstart',function(){    audio.play()})

    Html5的audio音频在电脑端和android端都可以实现自动播放,在iPhone上无法实现,下面针对的是微信浏览器里面的解决方法

    /* 苹果自动播放 */document.addEventListener("WeixinJSBridgeReady", function () {    document.getElementById('audio').play();}, false);

    手机拍照和上传图片

    Q: 针对file类型增加不同的accept字段

    A:代码如下 <input type="file">的accept 属性

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

    输入框自动填充颜色

    Q: 针对input标签已经输入过的,会针对曾经输入的内容填充黄色背景,这是webkit内核自动添加的,对应的属性是autocomplete,默认是on,另对应的样式是input:-webkit-autofill 且是不可更改的。

    A:方案如下

    • 设置标签的autocomplete="off",亲测无效可能
    • 设置盒子的内阴影为你常态的颜色(下面以白色为例)
    box-shadow:0 0  0 1000px  #fff inset ;-webkit-box-shadow: 0 0 0px 1000px #fff inset;

    开启硬件加速

    Q: 优化渲染性能

    A:代码如下

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

    移动端去除type为number的箭头

    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{    -webkit-appearance: none !important;    margin: 0; }

    实现横屏竖屏的方案

    css 用 css3媒体查询,缺点是宽度和高度不好控制

        @media screen and (orientation: portrait) {        .main {            -webkit-transform:rotate(-90deg);            -moz-transform: rotate(-90deg);            -ms-transform: rotate(-90deg);            transform: rotate(-90deg);            width: 100vh;            height: 100vh;            /*去掉overflow 微信显示正常,但是浏览器有问题,竖屏时强制横屏缩小*/            overflow: hidden;        }    }    @media screen and (orientation: landscape) {        .main {            -webkit-transform:rotate(0);            -moz-transform: rotate(0);            -ms-transform: rotate(0);            transform: rotate(0)        }    }

    js 判断屏幕的方向或者resize事件

    var evt = "onorientationchange" in window ? "orientationchange" : "resize";window.addEventListener(evt, function() {    var width = document.documentElement.clientWidth;    var height =  document.documentElement.clientHeight;    $print =  $('#print');    if( width > height ){        $print.width(width);        $print.height(height);        $print.css('top',  0 );        $print.css('left',  0 );        $print.css('transform' , 'none');        $print.css('transform-origin' , '50% 50%');    }else{        $print.width(height);        $print.height(width);        $print.css('top',  (height-width)/2 );        $print.css('left',  0-(height-width)/2 );        $print.css('transform' , 'rotate(90deg)');        $print.css('transform-origin' , '50% 50%');    }}, false);

    参考资料:css或者js实现横屏竖屏的方案

    fastclick导致下拉框焦点冲突

    Q: 移动端使用fastclick之后,在ios环境下,有几个连续的下拉框 第一个select框突然填充了第二个下拉框的内容。

    A:根本原因是Fastclick导致IOS下多个 select ,点击某一个,焦点不停变换的bug。修改源码,在onTouchStart事件内判断设备是否为IOS,再判断当前nodeName是否为select,如果是return false去阻止fastClick执行其他事件

    github源码地址:fastclick.js

    //line 391行FastClick.prototype.onTouchStart = function(event) {//在其方法中添加判断 符合ios select的时候 不返回事件if(deviceIsIOS&&this.targetElement =="select")this.targetElement = nullevent.preventDefault();}//line521 或者讲源码中 有关touchEnd判断非ios或者非select的事件注释,if (!deviceIsIOS || targetTagName !== 'select') {    this.targetElement = null;    event.preventDefault();}

    ios input不能自动获取焦点

    Q: 如题,希望在某个页面时可以自动让输入框获取焦点

    A: 解决方案:

    document.addEventListener('touchstart',function(e){    document.getElementById('focus').focus();}); //不能把focus封装起来起来触发,那样也无效

    备注:具体实现效果待验证,希望有时间的可以验证追加可能的问题以及补充方案

    去除webkit默认的滚动条

    Q: 如题

    A: 解决方案:

    element::-webkit-scrollbar{    display:none;}

    video 不能自动播放

    Q: 如题

    A: 解决方案:

    • autoplay 及 js 控制播放,仍然有部分设备不起作用

    $("html").one("touchstart",function(){    video.play();})

    inline-block元素使用vertical-align后,父元素高度被莫名撑开

    Q: 如题,不一定出现在移动端,但是移动端会效果比较严重,一般是用于设置同行内容垂直居中的

    A: 解决方案:

    .par{    font-size:0}

    背景图片没实现自适应

    Q: 如题

    A: 解决方案:用background-size

    element{    background-size:100% 100%;}

    css3 translate3d平移效果后的元素子元素闪动

    Q: 应用css3 translate3d平移效果后的标签元素,在ios上的safari以及app的webview中会出现页面加载完成后其子元素闪动现象,具体如下:

    <ul style="-webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0ms; ">    <li>        <img src="http://pic2.58.com/m58/m3/img/imglogo_gray.png" ref="http://1.pic.58control.cn/p1/big/n_22998799743506.jpg">    </li></ul>

    A: 解决方案:

    • 可在其子元素中统一添加和其相同的属性,具体如下:
    <ul style="-webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0ms; ">    <li style="-webkit-transform: translate3d(0, 0, 0); ">        <img src="http://pic2.58.com/m58/m3/img/imglogo_gray.png" ref="http://1.pic.58control.cn/p1/big/n_22998799743506.jpg">    </li></ul>
    • 在其元素中添加如下属性:
    -webkit-backface-visibility: hidden;/* (设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/-webkit-transform-style: preserve-3d; /*(设置内嵌的元素在3D 空间如何呈现:保留3D )*/

    position:fixed 固定效果

    Q: 当给指定元素添加position:fixed时首次加载页面完成后,滑动整个网页,添加此样式的元素会跟随页面滚动(目的是固定此元素)。

    A: 解决方案:为其元素添加如下css属性即可:

    -webkit-transform:translate3d(0,0,0)

    备注:此方案不一定有效,需要后续验证或者提供更好的方案

    IOS键盘字母输入,默认首字母大写

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

    select 下拉选择设置右对齐

    Q: 如题,默认是左对齐,产品有其他需求

    A: 解决方案:

    select option {    direction: rtl;}

    通过transform进行skew变形,rotate旋转会造成出现锯齿现象

    Q: 如题

    A: 解决方案:

    -webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);transform: rotate(-4deg) skew(10deg) translateZ(0);outline: 1px solid rgba(255,255,255,0)

    移动端点击延迟

    Q: 如题

    A: 解决方案:引用 fastclick.js

    移动端点透问题

    Q: 如题,当点击绝对定位元素的时候,下面的元素虽然被遮盖,但也被触发了。

    A: 原因是:touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的,这个时间大概在300ms左右,也就是说我们tap触发之后蒙层隐藏, 此时 click还没有触发,300ms之后由于蒙层隐藏,我们的click触发到了下面的a链接上。

    解决方案:

    • 尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
    • 用fastclick,http://github.com/ftlabs/fastclick
    • 用preventDefault阻止a标签的click
    • 延迟一定的时间(300ms+)来处理事件 (不推荐)
    • 以上一般都能解决,实在不行就换成click事件。

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

    Q: 如题

    A: 解决方案:通过正则替换

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

    Retina屏的1px边框

    Q: 如题

    A: 解决方案:

    Element{    border-width: thin;}

    input 的 compositionstart 和 compositionend 事件

    在 Web 开发中,经常要对表单元素的输入进行限制,比如说不允许输入特殊字符,标点。通常我们会监听 input 事件:

    inputElement.addEventListener('input', function(event) {  let regex = /[^1-9a-zA-Z]/g;  event.target.value = event.target.value.replace(regex, '');  event.returnValue = false});

    这段代码在 Android 上是没有问题的,但是在 iOS 中,input 事件会截断非直接输入,什么是非直接输入呢,在我们输入汉字的时候,比如说「喜茶」,中间过程中会输入拼音,每次输入一个字母都会触发 input 事件,然而在没有点选候选字或者点击「选定」按钮前,都属于非直接输入。

    compositionstart 事件在用户开始进行非直接输入的时候触发,而在非直接输入结束,也即用户点选候选词或者点击「选定」按钮之后,会触发 compositionend 事件。

    var inputLock = false;function do(inputElement) {    var regex = /[^1-9a-zA-Z]/g;    inputElement.value = inputElement.value.replace(regex, '');}inputElement.addEventListener('compositionstart', function() {  inputLock = true;});inputElement.addEventListener('compositionend', function(event) {  inputLock = false;  do(event.target);})inputElement.addEventListener('input', function(event) {  if (!inputLock) {    do(event.target);    event.returnValue = false;  }});

    添加一个 inputLock 变量,当用户未完成直接输入前,inputLock 为 true,不触发 input 事件中的逻辑,当用户完成有效输入之后,inputLock 设置为 false,触发 input 事件的逻辑。这里需要注意的一点是,compositionend 事件是在 input 事件后触发的,所以在 compositionend事件触发时,也要调用 input 事件处理逻辑。


    楼主热帖排行榜
    大奖18dj18vip社区温馨提示:
    大奖18dj18vip(www.dastanona.com)十分重视网络版权及其他知识产权的保护,针对网络侵权采取如下版权政策:
    1、大奖18dj18vip有理由相信网友侵犯任何人的版权或作品,(图文,文字,下载,视频,非法传播),大奖18dj18vip有权不事先通知即删除涉嫌侵权的作品和内容
    2、大奖18dj18vip将采取必要的网络技术手段,确认为侵权作品或内容的用户有权进行警告、屏蔽、删除的行为,尽可能的防止侵权行为的发生
    3、大奖18dj18vip影视资源均收集自互联网,没有提供影片资源存储,也未参与录制上传,若大奖18dj18vip收录的资源涉及您的版权或知识产权或其他利益,我们会立即删除
    4、大奖18dj18vip,删帖,投诉,举报,侵权,若大奖18dj18vip侵犯您的权益,附上身份及权利证明,请直接发送邮件到 kefu-sosoba@qq.com 我们将在一个工作日内删除
    soso大奖18dj18vip社区是聚合百度搜索,搜狗搜索,360搜索,新闻,教育,站长,广告,娱乐,影视,微信,网盘,营销,手机,汽车,游戏,论坛综合为一体的大型门户社区www.dastanona.com
    关闭

    大奖18dj18vip社区公告上一条 /1 下一条

    Powered by www.dastanona.com X3.4© 2013-2019 大奖18dj18vip社区 小黑屋|手机版|Archiver|地图|关于我们|腾讯云代金券|帮助中心|soso吧社区
    广告服务/项目合作: kefu-sosoba@qq.com  侵权举报邮箱: kefu-sosoba@qq.com  大奖18dj18vip建站时间:创建于2013年07月23日
    免责声明:大奖18dj18vip所有的内容均来自互联网以及第三方作者自由发布,版权归原作者版权所有,大奖18dj18vip不承担任何的法律责任,若有侵权请来信告知,我们立即删除!
    大奖18dj18vip热搜:大奖18dj18vip,搜搜,搜搜网,搜一下,搜吧,soso,sousou,快搜,soso搜搜,好搜,搜索,soso问问,搜搜问问,搜搜小说,搜搜图片,搜狗搜索,微信搜索,图片搜索,百度搜索,手机搜索,网盘搜索

    GMT+8, 2019-10-17 16:35 , Processed in 1.140625 second(s), 10 queries , Gzip On, MemCache On.

    快速回复 返回顶部 返回列表