专栏首页达摩兵的技术空间移动web端常见bug汇总001

移动web端常见bug汇总001

前言

本文是摘录整理了移动端常见的一些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); 参考资料css或者js实现横屏竖屏的方案

参考资料

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 阿里人有话说(来自阿里前端的建议)

    能进阿里网易这样的公司,相信是很多程序员或者不止程序员的梦想,哪怕不是发展事业,进去镀金也是不错的选择。那么作为一名前端如果想这方面有想法,我为大家问到了一名阿...

    RobinsonZhang
  • 工作被别人打断了怎么办?

    我们经常在自己设置的番茄钟也就是25分钟内遇到被打断的情况。这里我们从几个角度切入分析应该如何应对。

    RobinsonZhang
  • 与我一起学正则

    1、校验密码强度 密码的强度必须包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间 ^(?=.\d)(?=.[a-z])(?=.*[A-Z])...

    RobinsonZhang
  • 移动端bug汇总(一)

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

    yuezhongbao
  • 移动端bug汇总(一)

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

    zhbyue
  • 匿名者组织攻击Black Lives Matter网站长达六个月

    5月1日,一个名为GhostSquad的匿名组织宣布使用拒绝服务攻击Black Lives Matter网站,在一天之内让blacklivesmatter.co...

    96php.cn
  • 读《股票投资入门与实战技巧》— 新手炒股的5堂必修课

    只有把别人看来是高风险的地方操练成对于你来说是低风险,你才能取的这高风险中的高收益。 (1)低风险才能高收益 (2)做好资金管理

    Ewall
  • 美团点评基于 Flink 的实时数仓平台实践

    摘要:数据仓库的建设是“数据智能”必不可少的一环,也是大规模数据应用中必然面临的挑战,而 Flink 实时数仓在数据链路中扮演着极为重要的角色。本文中,美团点评...

    程序员小强
  • Python中的finally

    现代语言一般都内置了对异常处理的支持,其中较为广泛使用的就是try语句了。(by gashero)且一般来说其子句还包含有except和finally。Pyth...

    py3study
  • LWC 64: 751. IP to CIDR

    思路: 题解很取巧,简单说说思路,给定初始的IP之后,转换成2进制的形式,接着每次都找二进制串中的最低位1,它表示的就是CIDR的长度。比如00011000...

    用户1147447

扫码关注云+社区

领取腾讯云代金券