移动端常见bug汇总001
点击样式闪动
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);
问题:IOS 微信浏览器 软键盘弹出,关闭键盘,页面不回落
onBlurInput(){
setTimeout(function(){
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
}
问题:ios手机 点击软键盘上的验证码 在输入框里自动会输入两遍
setCodeLength(){
if(this.vcode.length>6)
this.vcode = this.vcode.slice(0,6)
},
移动端常见bug汇总001的更多相关文章
- 技术分享 | WEB 端常见 Bug 解析
对于 WEB 产品来说,有一些常见的 Bug,本章节挑选一些比较典型的 Bug 进行举例介绍. UI Bug 页面展示的时候,需要根据长度的边界值去设计用例进行验证. 一般来说都会有超长内容的验证 ...
- 移动端常见bug
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
- web开发常见bug汇总
1.在做使用struts2进行文件上传时总是出现 java.lang.NoClassDefFoundError: org/apache/commons/io/output/DeferredFileOu ...
- ie7,8常见bug,共计257个bug汇总?如何解决ie的历史bug
ie7.8常见bug,共计257个bug汇总 针对web开发者来说,浏览器的bug,特备是ie的bug是很多人的噩梦,因为ie的更新换代没有ff,chrome,safari,opera那么快,而且ie ...
- IE6的那些css常见bug(汇总)
IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...
- 各个领域常见的一些bug汇总
一 Android系统功能测试设计的测试用例 a.对所测APP划分模块 b.详细列出每个模块的功能点(使用Xmind绘制功能图) c.使用等价类划分.边界值.场景发等对各功能点编写测试用例(考虑中断功 ...
- 我的第一篇文章 —— IE6的那些css常见bug(汇总)
我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的,听到了一些前端知识或者前沿技术. 另外 ...
- 常见bug解析-移动端
手机测试常见bug解析 1.测试时遇到“手机无响应”? 有以下几个原因: a.手机内存不足 b.android进程之间死锁引起的(就是两个进程之间) c.手机的CPU运行高引起的 可以查看手机的崩溃日 ...
- IE haslayout 问题引起的常见 bug
http://www.qianduan.net/comprehensive-haslayout/ 要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底 ...
随机推荐
- (leetcode162)find peak element
1题目 A peak element is an element that is greater than its neighbors. Given an input array where num[ ...
- 行人检测(Pedestrian Detection)资源
一.论文 综述类的文章 [1]P.Dollar, C. Wojek,B. Schiele, et al. Pedestrian detection: an evaluation of the stat ...
- ubuntu16.04 LTS把下载源改为阿里云的源
为什么要切换下载源到国内的源上? Ubuntu的中国服务器下载速度很慢,我们可以尝试修改软件更新源,这样下载和更新软件的速度会加快很多. 一.linux系统版本: ubuntukylin-16.04- ...
- 【spring cloud】spring cloud2.X spring boot2.0.4调用feign配置Hystrix Dashboard 和 集成Turbine 【解决:Hystrix仪表盘Unable to connect to Command Metric Stream】【解决:Hystrix仪表盘Loading...】
环境: <java.version>1.8</java.version><spring-boot.version>2.0.4.RELEASE</spring- ...
- 如何给wp(Windows phone)中搜索关键字加亮?
问题来源 最近在群里看到群友讨论在wp中有个搜索功能,要求搜索关键字在搜索结果内容中加亮(即加颜色),由于wp中没有自带这样的控件,于是大家各抒自见,有人说用第三方控件,有人说用richtextbox ...
- Swift5 语言参考(四) 表达式
在Swift中,有四种表达式:前缀表达式,二进制表达式,主表达式和后缀表达式.评估表达式会返回一个值,导致副作用,或两者兼而有之. 前缀和二进制表达式允许您将运算符应用于较小的表达式.主要表达式在概念 ...
- 【ElasticSearch】:索引Index、文档Document、字段Field
因为从ElasticSearch6.X开始,官方准备废弃Type了.对应数据库,对ElasticSearch的理解如下: ElasticSearch 索引Index 文档Document 字段Fiel ...
- 【Anaconda】:科学计算的Python发行版
[背景] Python易用,但包管理和Python不同版本的问题比较头疼,特别是当你使用Windows的时候.为了解决这些问题,有不少发行版的Python,比如WinPython.Anaconda等, ...
- D3.js(v3)+react框架 基础部分之数据绑定及其工作过程与绑定顺序
数据绑定: 将数据绑定到Dom上,是D3最大的特色.d3.select和d3.selectAll返回的元素的选择集.选择集上是没有数据的. 数据绑定就是使被选择元素里“含有”数据. 相关函数有两个: ...
- POJ 2590
#include<iostream> #include<algorithm> #define MAXN 1000000 using namespace std; unsigne ...