移动web端常见bug

日期:2020-05-07编辑作者:Web前端

时间: 2019-09-07阅读: 158标签: 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;

点击样式闪动

-webkit-tap-highlight-color : rgba (255, 255, 255, 0) ;// i.e . Nexus5/Chrome and Kindle Fire HD 7 ''-webkit-tap-highlight-color : transparent ; 

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

屏蔽用户选择

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

Q: 禁止用户选择页面中的文字或者图片A:代码如下

图片 1

-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;

屏蔽用户选择

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

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

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

A:代码如下

-webkit-appearance: none;

图片 2

禁止文本缩放

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

Q: 禁止文本缩放A:代码如下

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

-webkit-text-size-adjust: 100%;

A:代码如下

如何禁止保存或拷贝图像

图片 3

Q: 如何禁止保存或拷贝图像A:代码如下

禁止文本缩放

img{-webkit-touch-callout: none;}

Q: 禁止文本缩放

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

A:代码如下

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

图片 4

-webkit-font-smoothing: antialiased;

如何禁止保存或拷贝图像

设置input里面placeholder字体的大小

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

Q: 设置input里面placeholder字体的大小A:代码如下

A:代码如下

::-webkit-input-placeholder{ font-size:10pt;}

图片 5

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

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

Q: audio元素和video元素在ios和andriod中无法自动播放A:代码如下,触屏及播放

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

$('html').one('touchstart',function(){audio.play()})

A:代码如下

手机拍照和上传图片

图片 6

Q: 针对file类型增加不同的accept字段A:代码如下

设置input里面placeholder字体的大小

input type="file"的accept 属性!-- 选择照片 --input type=file accept="image/*"!-- 选择视频 --input type=file accept="video/*"

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

输入框自动填充颜色

A:代码如下

Q: 针对input标签已经输入过的,会针对曾经输入的内容填充黄色背景,这是webkit内核自动添加的,对应的属性是autocomplete,默认是on,另对应的样式是input:-webkit-autofill 且是不可更改的。A:方案如下 1 设置标签的autocomplete="off",亲测无效可能 2 设置盒子的内阴影为你常态的颜色(下面以白色为例)

图片 7

 box-shadow:0 0 0 1000px #fff inset ; -webkit-box-shadow: 0 0 0px 1000px #fff inset;

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

本文由www.129028.com金沙发布于Web前端,转载请注明出处:移动web端常见bug

关键词:

nginx负载均衡如何实现www.129028.com金沙?

什么是nginx? Nginx是一个免费的,开源的,高性能的服务器和反向代理服务器软件,同时它也可以为IMAP和POP3服务器代...

详细>>

最少编码原则

这的确是大多数程序员,甚至是那些高级程序员都很容易混淆的一个重点。作为一名程序员,编写代码无疑是你职业...

详细>>

CSS中cursor 鼠标指针光标样式

值 前面url()是自定义鼠标的样式,图像的地址,后面的参数是 css 标准的 cursor样式,(IE下面可以不需要) 出现版本...

详细>>

AJAX:如何处理书签和后退按钮(1)

或者如果你不喜欢onclick: window.onload = initialize;function initialize() { // initialize the DHTML History // framework dhtmlHistory.initial...

详细>>