移动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 条评论
登录 后参与评论

相关文章

来自专栏前端杂货铺

隐藏的几种实现

 页面布局上隐藏,但是对屏幕阅读器可见的几种方式:      1, .h{position:relative; left:-900em;top:-900em;...

35012
来自专栏web前端

01移动端基本环境和常见问题

一、chrome模拟器(只是模拟尺寸,最终还是需要真机测试)      1、F12手机模拟(emulation)      2、选择或者添加模拟设备 二、本地服...

2259
来自专栏Android小菜鸡

自定义View学习之路(四)————图片介绍框

  走往android的进阶之路,避不开自定义View的学习和绘制。这里以绘制一个可用的图片相框为例。开始系统的学习View的绘制。   麻雀虽小却五脏俱全,...

771
来自专栏yuezhongbao积累

移动端bug汇总(一)

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

39913
来自专栏积累沉淀

js监控输入密码检测大写键盘是否锁定

? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="...

2195
来自专栏姬小光

【第011期】如何区分页面上的图片和文字

在一个网页上,我们会看到有很多的图片,也有很多的文字。对于普通的用户,不需要去在意到底哪些是图片,哪些是文字。

1333
来自专栏CaiRui

Html再学

1.  Html是网页的载体。内容就是网页制作者放在页面上想要用户浏览的信息,可以包括文字、图片、视频等。 2.  CSS样式是展现。就像网页的外衣。比如,标题...

2876
来自专栏向治洪

React Native之常用第三方库

前言 React Native出来一年多了,受到各大开发人员的喜爱,但是由于只是专注于View层的开发,因此在很多深层次上还需要结合原生app做一定的兼容,还有...

4329
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(六)动画animation,Web字体

好的前端工程师,会更注重用户的体验和交互。那么动画就是将我们的静态页面,变成具有灵动性,为我们的界面添加个性的一种方式。

931
来自专栏HTML5学堂

如何让旧浏览器支持HTML5新标签

HTML5学堂:开发永远和理论不相同,一旦考虑IE低端浏览器,所有的HTML5新增功能都成了浮云~~~从HTML5新增标签的语义角度来说,是有利于网站SEO的,...

3177

扫码关注云+社区

领取腾讯云代金券