移动端常见bug

来源:http://www.chinese-glasses.com 作者:Web前端 人气:102 发布时间:2020-05-06
摘要:Q: 针对file类型增加不同的accept字段A:代码如下 Q:针对input标签已经输入过的,会针对曾经输入的内容填充黄色背景,这是webkit内核自动添加的,对应的属性是autocomplete,默认是on,另对应的

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

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

-webkit-appearance: none;

图片 1

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

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

 body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important; } 

A:代码如下

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

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

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

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

设置input里面placeholder字体的大小

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

时间: 2019-09-07阅读: 158标签: bug点击样式闪动

A:方案如下

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

喜欢小编文章的,可以点个订阅,小编都会不停更新文章,分享前端学习知识,以及程序员的趣事!

输入框自动填充颜色

A:代码如下

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

图片 2

js 判断屏幕的方向或者resize事件

禁止文本缩放

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

图片 3

 input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; }

点击样式闪动

手机拍照和上传图片

图片 4

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

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

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

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

图片 5

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

图片 6

@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) }}

图片 7

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

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

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

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

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

css 用 css3媒体查询,缺点是宽度和高度不好控制

屏蔽用户选择

A:代码如下

css 用 css3媒体查询,缺点是宽度和高度不好控制

手机拍照和上传图片

Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。A:根本原因是-webkit-tap-highlight-color,这个属性是用于设定元素在移动设备(如Adnroid、iOS)上被触发点击事件时,响应的背景框的颜色。建议写在样式初始化中以避免所以问题:div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);}另外出现蓝色边框:outline:none;

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

禁止文本缩放

屏蔽用户选择

开启硬件加速

感谢阅读

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

A:代码如下

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

A:代码如下

本文由10bet发布于Web前端,转载请注明出处:移动端常见bug

关键词:

最火资讯