移动端常见bug

时间: 2019-09-07阅读: 400标签: bug

点击样式闪动

Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。
A:根本原因是-webkit-tap-highlight-color,这个属性是用于设定元素在移动设备(如Adnroid、iOS)上被触发点击事件时,响应的背景框的颜色。建议写在样式初始化中以避免所以问题:div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);}另外出现蓝色边框:outline:none;

-webkit-tap-highlight-color : rgba (255, 255, 255, 0) ;
// i.e . Nexus5/Chrome and Kindle Fire HD 7 ''
-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%;

如何禁止保存或拷贝图像

Q: 如何禁止保存或拷贝图像
A:代码如下

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

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

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

-webkit-font-smoothing: antialiased;

设置input里面placeholder字体的大小

Q: 设置input里面placeholder字体的大小
A:代码如下

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

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

Q: audio元素和video元素在ios和andriod中无法自动播放
A:代码如下,触屏及播放

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

手机拍照和上传图片

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:方案如下 1 设置标签的autocomplete="off",亲测无效可能 2 设置盒子的内阴影为你常态的颜色(下面以白色为例)

 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);

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

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

移动端去除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);
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5773

前端页面禁止调试debugger方法汇总

打开控制台直接跳转页面;打开控制台,页面内容显示:检测到非法调试,请关闭后刷新重试!反调试函数,参数:开关,执行代码

Vue中你可能认为是bug的情况原来是这样的

我们知道Vue框架剧本双向数据绑定功能,在我们使用方便的同时,还有一些细节问题我们并不知道,接下来一起探讨一些吧.Vue做数据劫持是基于Object.defineProperty的,但是他只能做set和get,而无法监视到属性的增加或者减少

css重点知识和bug解决方法

图片向下撑大3像素问题;如何实现一张未知宽高的图片在一个盒子里面做水平垂直居中?元素的类型分类哪几种?各自都有什么特点?如何实现一个元素消失和出现?单行文本溢出显示省略号怎么实现?

ios 键盘弹起bug,出现的问题,光标穿透,页面无法点击

有时候使用ios输入键盘以后,直接点击页面按钮会出现事件无效。解决方法:1、 输入框输入后点击提交按钮后,弹窗会发现光标穿透问题

如何阻止页面不断debugger?

一次扒某网站的前端代码,打开控制台要看Network,结果发现他们页面一打开控制台就不断的debugger,100ms一次,很影响看页面内容。而对应的操作是在Chrome控制台的Source Tab页点击Deactivate breakpoints按钮或者按下Ctrl + f8

jquery绑定点击事件动画BUG

jq中的animate()方法所实现的动画在绑定事件的同时会产生各种类型的BUG,在事件选择的时候我会尽可能的使用mouseenter和mouseleave来避免,mouseover和mouseout所产生的事件冒泡。

程序员如何减少开发中的 Bug?

周会上同事抛出了一个问题,程序员如何减少开发中的 Bug?很有意思的一个话题,本篇文章我们来进行探讨与总结。爱因斯坦曾经说过:「如果给我一个小时解答一道决定我生死的问题,我会花55分钟来弄清楚这道题到底是在问什么

Web开发人者的十大Bug跟踪工具

有许多可视化的 Bug 跟踪工具,通常可以根据特性集、集成和定价进行分类。选择一个 Bug 跟踪工具时,需要整体考虑团队的规模和需求。对于很多团队来说,项目管理并不是必需的,因此对 Bug 跟踪工具的真正需求变成了一个强大的解决方案提供者

不能精准定位bug?可能是你没get到这几个打印日志的诀窍!

当你遇到问题的时候,只能通过debug功能来确定问题,你应该考虑打日志,良好的系统,是可以通过日志进行问题定位的。当你碰到if…else 或者 switch这样的分支时,要在分支的首行打印日志,用来确定进入了哪个分支

零bug策略,会不会本身是个bug?

如今软件开发迭代频繁,随之而来的是产品质量难以保障,用户一天天被动找到 bug 而骂开发,开发要么被拉去祭天,要么拉慢开发新功能的进度条,分出时间精力处理 bug。这已经成了软件开发行业的一大难题,有什么解决方案呢?

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广