移动web端常见bug

本文是摘录整理了移动端常见的一些bug以及解决方案

点击样式闪动

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

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

屏蔽用户选择

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

A:代码如下

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

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

A:代码如下

禁止文本缩放

Q: 禁止文本缩放

A:代码如下

如何禁止保存或拷贝图像

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

A:代码如下

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

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

A:代码如下

设置input里面placeholder字体的大小

Q: 设置input里面placeholder字体的大小

A:代码如下

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

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

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

手机拍照和上传图片

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

A:代码如下

输入框自动填充颜色

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

A:方案如下

1 设置标签的autocomplete=”off”,亲测无效可能

2 设置盒子的内阴影为你常态的颜色(下面以白色为例)

开启硬件加速

Q: 优化渲染性能

A:代码如下

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

移动端去除type为number的箭头

实现横屏竖屏的方案

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

感谢阅读

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 最值得你收藏的30个Python常用小技巧!

    [0, 1, 16, 81, 256, 625, 1296, 2401, 4096, 6561, 10000, 121, 144, 169, 196, 225,...

    一墨编程学习
  • Python爬虫开发的3大难题,别上了贼船才发现,水有多深

    写爬虫,是一个非常考验综合实力的活儿。有时候,你轻而易举地就抓取到了想要的数据;有时候,你费尽心思却毫无所获。

    一墨编程学习
  • Python3除法之真除法、截断除法和下取整对比

    在Python3中,数学运算中的除法被分为两种,分别是“真除法”,即无论任何类型相除的结果都会保留小数点,和我们实际的数学运算结果一致,而“截断除法”,则是无论...

    一墨编程学习
  • activiti-explorer部署笔记

    1、解压到tomcat 把activiti-5.18.0\wars\activiti-explorer.war 在tomcat7的webapps目录下解压为 a...

    斯武丶风晴
  • 目标检测--Training Region-based Object Detectors with Online Hard Example Mining

    Training Region-based Object Detectors with Online Hard Example Mining

    用户1148525
  • Python3除法之真除法、截断除法和下取整对比

    在Python3中,数学运算中的除法被分为两种,分别是“真除法”,即无论任何类型相除的结果都会保留小数点,和我们实际的数学运算结果一致,而“截断除法”,则是无论...

    一墨编程学习
  • 什么是MAP? 理解目标检测模型中的性能评估

    【导读】近日,机器学习工程师Tarang Shah发布一篇文章,探讨了机器学习中模型的度量指标的相关问题。本文首先介绍了机器学习中两个比较直观和常用的度量指标:...

    WZEARW
  • python 监控键盘输入

    py3study
  • es6中的let声明变量与es5中的var声明变量的区别,局部变量与全局变量

    windseek
  • 观点 | 人工智能的第三定律:计算的未来是模拟

    AI 科技评论按:在人工智能研究如火如荼的今天,似乎也是时候回过头来思考一下模拟计算在未来所具有的意义。当人类已经习惯于通过数字化编程控制机器,也许以神经网络为...

    AI科技评论

扫码关注云+社区

领取腾讯云代金券