移动端常见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 是一个非常有必要彻底 ...
随机推荐
- E - Tears of Drowned
Description Tia Dalma: Come. What service may I do you? You know I demand payment. Jack: I brought p ...
- delphi 分享三个随机字符串
uses math; function GenID:String; var b, x: byte; begin Result := '{'; Randomize; do begin ) > ,) ...
- [NewCode 6] 重建二叉树
题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7, ...
- Elasticsearch 系列3 --- Elasticsearch配置
一. 位置 ES的配置文件位于安装目录\config下面,主要有 (1) elasticsearch.yml ES系统的配置: (2) jvm.options Java虚拟机配置: (3) log4j ...
- Could not load file or assembly 'Microsoft.AnalysisServices.SharePoint.Integration'
In Central Administration, in System Settings, click Manage farm solutions. Click Powerpivotwebapp. ...
- 【计算机网络】 DNS学习笔记 (>﹏<)
参考书籍 <计算机网络-自顶向下> 作者 James F. Kurose DNS的作用 DNS是因特网的目录服务 DNS是因特网的目录服务,它提供了主机名到IP地址映射的查询服务 ...
- graphite custom functions
尊重作者的劳动,转载请注明作者及原文地址 http://www.cnblogs.com/txwsqk/p/6522854.html 参考 https://graphite.readthedocs.io ...
- iOS数据持久化--用户属性
一.简介 NSUserDefaults类是一个单例类,每个程序只有一个 NSUserDefaults对象,可以用来存储用户的属性,比如自动登录时候的账号密码等小型的数据. 二.使用 1.NSUserD ...
- 一步步Cobol 400 上手自学入门教程01 - 基础概念
先学习基础概念 1.COBOL字符:包含: User-defined words 用户定义字符 System-names Reserved words 关键字 2.用户定义字符User-defin ...
- postgresql-死锁
死锁问题:1.长事务,事务中包含了文书的上传下载,导致其他表的锁等待,最终导致死锁. 2.并发更新,如果更新慢的话,很可能导致,锁等待.需要加for update或者ad lock 3.数据库中查询p ...