前言

本文是摘錄整理了移動(dòng)端常見的一些bug以及解決方案，第一篇，后面還會(huì)有持續(xù)的文章更新整理。

點(diǎn)擊樣式閃動(dòng)

Q: 當(dāng)你點(diǎn)擊一個(gè)鏈接或者通過(guò)Javascript定義的可點(diǎn)擊元素的時(shí)候，它就會(huì)出現(xiàn)一個(gè)半透明的灰色背景。

A:根本原因是-webkit-tap-highlight-color，這個(gè)屬性是用于設(shè)定元素在移動(dòng)設(shè)備(如Adnroid、iOS)上被觸發(fā)點(diǎn)擊事件時(shí)，響應(yīng)的背景框的顏色。建議寫在樣式初始化中以避免所以問(wèn)題：div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);}另外出現(xiàn)藍(lán)色邊框：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 ;

復(fù)制代碼

屏蔽用戶選擇

Q: 禁止用戶選擇頁(yè)面中的文字或者圖片

A:代碼如下

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

復(fù)制代碼

移動(dòng)端如何清除輸入框內(nèi)陰影

Q: 在iOS上，輸入框默認(rèn)有內(nèi)部陰影，但無(wú)法使用 box-shadow 來(lái)清除，如果不需要陰影，可以這樣關(guān)閉：

A:代碼如下

-webkit-appearance: none;

復(fù)制代碼

禁止文本縮放

Q: 禁止文本縮放

A:代碼如下

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

復(fù)制代碼

如何禁止保存或拷貝圖像

Q: 如何禁止保存或拷貝圖像

A:代碼如下

img{

-webkit-touch-callout: none;}

復(fù)制代碼

解決字體在移動(dòng)端比例縮小后出現(xiàn)鋸齒的問(wèn)題

Q: 解決字體在移動(dòng)端比例縮小后出現(xiàn)鋸齒的問(wèn)題

A:代碼如下

-webkit-font-smoothing: antialiased;

復(fù)制代碼

設(shè)置input里面placeholder字體的大小

Q: 設(shè)置input里面placeholder字體的大小

A:代碼如下

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

復(fù)制代碼

audio元素和video元素在ios和andriod中無(wú)法自動(dòng)播放

Q: audio元素和video元素在ios和andriod中無(wú)法自動(dòng)播放

A:代碼如下,觸屏及播放

$('html').one('touchstart',function(){

audio.play()

})

復(fù)制代碼

手機(jī)拍照和上傳圖片

Q: 針對(duì)file類型增加不同的accept字段

A:代碼如下

的accept 屬性

復(fù)制代碼

輸入框自動(dòng)填充顏色

Q: 針對(duì)input標(biāo)簽已經(jīng)輸入過(guò)的，會(huì)針對(duì)曾經(jīng)輸入的內(nèi)容填充黃色背景，這是webkit內(nèi)核自動(dòng)添加的，對(duì)應(yīng)的屬性是autocomplete,默認(rèn)是on,另對(duì)應(yīng)的樣式是input:-webkit-autofill 且是不可更改的。

A:方案如下

1 設(shè)置標(biāo)簽的autocomplete="off",親測(cè)無(wú)效可能

2 設(shè)置盒子的內(nèi)陰影為你常態(tài)的顏色(下面以白色為例)

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

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

復(fù)制代碼

開啟硬件加速

Q: 優(yōu)化渲染性能

A:代碼如下

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

復(fù)制代碼

用戶設(shè)置字號(hào)放大或者縮小導(dǎo)致頁(yè)面布局錯(cuò)誤

body

{

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

text-size-adjust: 100% !important;

-moz-text-size-adjust: 100% !important;

}

復(fù)制代碼

移動(dòng)端去除type為number的箭頭

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{

-webkit-appearance: none !important;

margin: 0;

}

復(fù)制代碼

實(shí)現(xiàn)橫屏豎屏的方案

css 用 css3媒體查詢，缺點(diǎn)是寬度和高度不好控制

@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 微信顯示正常，但是瀏覽器有問(wèn)題，豎屏?xí)r強(qiáng)制橫屏縮小*/

overflow: hidden;

}

}

@media screen and (orientation: landscape) {

.main {

-webkit-transform:rotate(0);

-moz-transform: rotate(0);

-ms-transform: rotate(0);

transform: rotate(0)

}

}

復(fù)制代碼

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

復(fù)制代碼

參考資料

總結(jié)

以上是生活随笔為你收集整理的android oneshot自动播放bug,移动端常见bug汇总001的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。