欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

傾力總結(jié)40條常見(jiàn)的移動(dòng)端Web頁(yè)面問(wèn)題解決方案

 更新時(shí)間:2016年05月24日 16:05:42   作者:Aaron  
移動(dòng)端Web需要照顧觸摸操作的體驗(yàn),以及更多的屏幕旋轉(zhuǎn)與尺寸適配等問(wèn)題,非?,嵥?在這里為大家傾力總結(jié)40條常見(jiàn)的移動(dòng)端Web頁(yè)面問(wèn)題解決方案,歡迎收看收藏!

1、安卓瀏覽器看背景圖片,有些設(shè)備會(huì)模糊。

用同等比例的圖片在PC機(jī)上很清楚,但是手機(jī)上很模糊,原因是什么呢?

經(jīng)過(guò)研究,是devicePixelRatio作怪,因?yàn)槭謾C(jī)分辨率太小,如果按照分辨率來(lái)顯示網(wǎng)頁(yè),這樣字會(huì)非常小,所以蘋(píng)果當(dāng)初就把iPhone 4的960640分辨率,在網(wǎng)頁(yè)里只顯示了480320,這樣devicePixelRatio=2?,F(xiàn)在android比較亂,有1.5的,有2的也有3的。

想讓圖片在手機(jī)里顯示更為清晰,必須使用2x的背景圖來(lái)代替img標(biāo)簽(一般情況都是用2倍)。例如一個(gè)div的寬高是100100,背景圖必須得200200,然后background-size:contain;,這樣顯示出來(lái)的圖片就比較清晰了。

代碼可以如下:

background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;display:inline-block; width:100%; height:50px;  

或者指定 background-size:contain;都可以,大家試試!

2、圖片加載

若您遇到圖片加載很慢的問(wèn)題,對(duì)這種情況,手機(jī)開(kāi)發(fā)一般用canvas方法加載:

具體的canvas API 參見(jiàn):http://javascript.ruanyifeng.com/htmlapi/canvas.html

下面舉例說(shuō)明一個(gè)canvas的例子:

<li><canvas></canvas></li> 

js動(dòng)態(tài)加載圖片和li 總共舉例17張圖片!

var total=17; 
var zWin=$(window); 
var render=function(){ 
  var padding=2; 
  var winWidth=zWin.width(); 
  var picWidth=Math.floor((winWidth-padding*3)/4); 
  var tmpl =''; 
  for (var i=1;i<=totla;i++){ 
  var p=padding; 
  var imgSrc='img/'+i+'.jpg'; 
  if(i%4==1){ 
   p=0; 
  } 
  tmpl +='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>'; 
  var imageObj = new Image(); 
  imageObj.index = i; 
  imageObj.onload = function(){ 
    var cvs =$('#cvs_'+this.index)[0].getContext('2d'); 
    cvs.width = this.width; 
    cvs.height=this.height; 
    cvs.drawImage(this,0,0); 
  } 
  imageObj.src=imgSrc; 
  } 

} 
render(); 

3、假如手機(jī)網(wǎng)站不用兼容IE瀏覽器,一般我們會(huì)使用zeptojs。zeptojs內(nèi)置Touch events方法,具體可以看http://zeptojs.com/#Touch events

看了一下zeptio新版的API,已經(jīng)支持IE10以上瀏覽器,對(duì)zeptojs可以選擇使用!

4、防止手機(jī)中網(wǎng)頁(yè)放大和縮小,這點(diǎn)是最基本的,最為手機(jī)網(wǎng)站開(kāi)發(fā)者來(lái)說(shuō)應(yīng)該都知道的,就是設(shè)置meta中的viewport

還有就是,有些手機(jī)網(wǎng)站我們看到如下聲明:

復(fù)制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">


設(shè)置了DTD的方式是XHTML的寫(xiě)法,假如我們頁(yè)面運(yùn)用的是html5,可以不用設(shè)置DTD,直接聲明<!DOCTYPE html>。

使用viewport使頁(yè)面禁止縮放。 通常把user-scalable設(shè)置為0來(lái)關(guān)閉用戶(hù)對(duì)頁(yè)面視圖縮放的行為。

<meta name="viewport" content="user-scalable=0" />

但是為了更好的兼容,我們會(huì)使用完整的viewport設(shè)置。

復(fù)制代碼 代碼如下:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

當(dāng)然,user-scalable=0,有的人也寫(xiě)成user-scalable=no,都可以的。

5、apple-mobile-web-app-capable

apple-mobile-web-app-capable是設(shè)置Web應(yīng)用是否以全屏模式運(yùn)行。

語(yǔ)法:

<meta name="apple-mobile-web-app-capable" content="yes">

說(shuō)明:

如果content設(shè)置為yes,Web應(yīng)用會(huì)以全屏模式運(yùn)行,反之,則不會(huì)。content的默認(rèn)值是no,表示正常顯示。你可以通過(guò)只讀屬性window.navigator.standalone來(lái)確定網(wǎng)頁(yè)是否以全屏模式顯示。

6、format-detection

format-detection 啟動(dòng)或禁用自動(dòng)識(shí)別頁(yè)面中的電話(huà)號(hào)碼。

語(yǔ)法:

<meta name="format-detection" content="telephone=no">

說(shuō)明:

默認(rèn)情況下,設(shè)備會(huì)自動(dòng)識(shí)別任何可能是電話(huà)號(hào)碼的字符串。設(shè)置telephone=no可以禁用這項(xiàng)功能。

7、html5調(diào)用安卓或者ios的撥號(hào)功能

html5提供了自動(dòng)調(diào)用撥號(hào)的標(biāo)簽,只要在a標(biāo)簽的href中添加tel:就可以了。

如下:

 <a href="tel:4008106999,1034">400-810-6999 轉(zhuǎn) 1034</a>

撥打手機(jī)直接如下

 <a href="tel:15677776767">點(diǎn)擊撥打15677776767</a>
8、html5GPS定位功能

具體請(qǐng)看:http://www.dbjr.com.cn/post/html5_GPS_getCurrentPosition

9、上下拉動(dòng)滾動(dòng)條時(shí)卡頓、慢

 body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

Android3+和iOS5+支持CSS3的新屬性為overflow-scrolling

10、禁止復(fù)制、選中文本

Element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

解決移動(dòng)設(shè)備可選中頁(yè)面文本(視產(chǎn)品需要而定)

11、長(zhǎng)時(shí)間按住頁(yè)面出現(xiàn)閃退

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

12、iphone及ipad下輸入框默認(rèn)內(nèi)陰影

Element{
  -webkit-appearance: none; 
}

13、ios和android下觸摸元素時(shí)出現(xiàn)半透明灰色遮罩

Element {
  -webkit-tap-highlight-color:rgba(255,255,255,0)
}

設(shè)置alpha值為0就可以去除半透明灰色遮罩,備注:transparent的屬性值在android下無(wú)效。

后面一篇文章有詳細(xì)介紹,地址:http://www.dbjr.com.cn/post/phone_web_ysk

14、active兼容處理 即 偽類(lèi) :active 失效

方法一:body添加ontouchstart

<body ontouchstart="">

方法二:js給 document 綁定 touchstart 或 touchend 事件

<style>
a {
 color: #000;
}
a:active {
 color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>
 document.addEventListener('touchstart',function(){},false);
</script>

15、動(dòng)畫(huà)定義3D啟用硬件加速

Element {
  -webkit-transform:translate3d(0, 0, 0)
  transform: translate3d(0, 0, 0);
}

注意:3D變形會(huì)消耗更多的內(nèi)存與功耗

16、Retina屏的1px邊框

Element{
  border-width: thin;
}

17、webkit mask 兼容處理

某些低端手機(jī)不支持css3 mask,可以選擇性的降級(jí)處理。

比如可以使用js判斷來(lái)引用不同class:

if( 'WebkitMask' in document.documentElement.style){
  alert('支持mask');
} else {
  alert('不支持mask');
}

18、旋轉(zhuǎn)屏幕時(shí),字體大小調(diào)整的問(wèn)題

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
  -webkit-text-size-adjust:100%;
}

19、transition閃屏

/設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn):保留3D /

-webkit-transform-style: preserve-3d;
/ 設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對(duì)用戶(hù)時(shí)是否可見(jiàn):隱藏 /

-webkit-backface-visibility:hidden;

20、圓角bug

某些Android手機(jī)圓角失效

background-clip: padding-box;

21、頂部狀態(tài)欄背景色

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

說(shuō)明:

除非你先使用apple-mobile-web-app-capable指定全屏模式,否則這個(gè)meta標(biāo)簽不會(huì)起任何作用。

如果content設(shè)置為default,則狀態(tài)欄正常顯示。如果設(shè)置為blank,則狀態(tài)欄會(huì)有一個(gè)黑色的背景。如果設(shè)置為blank-translucent,則狀態(tài)欄顯示為黑色半透明。如果設(shè)置為default或blank,則頁(yè)面顯示在狀態(tài)欄的下方,即狀態(tài)欄占據(jù)上方部分,頁(yè)面占據(jù)下方部分,二者沒(méi)有遮擋對(duì)方或被遮擋。如果設(shè)置為blank-translucent,則頁(yè)面會(huì)充滿(mǎn)屏幕,其中頁(yè)面頂部會(huì)被狀態(tài)欄遮蓋住(會(huì)覆蓋頁(yè)面20px高度,而iphone4和itouch4的Retina屏幕為40px)。默認(rèn)值是default。

22、設(shè)置緩存

<meta http-equiv="Cache-Control" content="no-cache" />

手機(jī)頁(yè)面通常在第一次加載后會(huì)進(jìn)行緩存,然后每次刷新會(huì)使用緩存而不是去重新向服務(wù)器發(fā)送請(qǐng)求。如果不希望使用緩存可以設(shè)置no-cache。

23、桌面圖標(biāo)

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />

iOS下針對(duì)不同設(shè)備定義不同的桌面圖標(biāo)。如果不定義則以當(dāng)前屏幕截圖作為圖標(biāo)。

上面的寫(xiě)法可能大家會(huì)覺(jué)得會(huì)有默認(rèn)光澤,下面這種設(shè)置方法可以去掉光澤效果,還原設(shè)計(jì)圖的效果!

<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />

圖片尺寸可以設(shè)定為5757(px)或者Retina可以定為114114(px),ipad尺寸為72*72(px)

24、啟動(dòng)畫(huà)面

<link rel="apple-touch-startup-image" href="start.png"/>

iOS下頁(yè)面啟動(dòng)加載時(shí)顯示的畫(huà)面圖片,避免加載時(shí)的白屏。

可以通過(guò)madia來(lái)指定不同的大小:

<!--iPhone-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />

<!-- iPhone Retina -->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">

<!-- iPad portrait -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />

<!-- iPad landscape -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />

<!-- iPad Retina portrait -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<!-- iPad Retina landscape -->
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

25、瀏覽器私有及其它meta

以下屬性在項(xiàng)目中沒(méi)有應(yīng)用過(guò),可以寫(xiě)一個(gè)demo測(cè)試以下!

QQ瀏覽器私有

全屏模式

<meta name="x5-fullscreen" content="true">

強(qiáng)制豎屏

<meta name="x5-orientation" content="portrait">

強(qiáng)制橫屏

<meta name="x5-orientation" content="landscape">

應(yīng)用模式

<meta name="x5-page-mode" content="app">

UC瀏覽器私有

全屏模式

<meta name="full-screen" content="yes">

強(qiáng)制豎屏

<meta name="screen-orientation" content="portrait">

強(qiáng)制橫屏

<meta name="screen-orientation" content="landscape">

應(yīng)用模式

<meta name="browsermode" content="application">

其它

針對(duì)手持設(shè)備優(yōu)化,主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器,比如黑莓

<meta name="HandheldFriendly" content="true">

微軟的老式瀏覽器

<meta name="MobileOptimized" content="320">

windows phone 點(diǎn)擊無(wú)高光

<meta name="msapplication-tap-highlight" content="no">

26、 IOS中input鍵盤(pán)事件keyup、keydown、keypress支持不是很好

問(wèn)題是這樣的,用input search做模糊搜索的時(shí)候,在鍵盤(pán)里面輸入關(guān)鍵詞,會(huì)通過(guò)ajax后臺(tái)查詢(xún),然后返回?cái)?shù)據(jù),然后再對(duì)返回的數(shù)據(jù)進(jìn)行關(guān)鍵詞標(biāo)紅。用input監(jiān)聽(tīng)鍵盤(pán)keyup事件,在安卓手機(jī)瀏覽器中是可以的,但是在ios手機(jī)瀏覽器中變紅很慢,用輸入法輸入之后,并未立刻相應(yīng)keyup事件,只有在通過(guò)刪除之后才能相應(yīng)!

解決辦法:

可以用html5的oninput事件去代替keyup

<input type="text" id="testInput">
<script type="text/javascript">
  document.getElementById('testInput').addEventListener('input', function(e){
    var value = e.target.value;
  });
</script>

然后就達(dá)到類(lèi)似keyup的效果!

27、h5網(wǎng)站input 設(shè)置為type=number的問(wèn)題

h5網(wǎng)頁(yè)input 的type設(shè)置為number一般會(huì)產(chǎn)生三個(gè)問(wèn)題,一個(gè)問(wèn)題是maxlength屬性不好用了。另外一個(gè)是form提交的時(shí)候,默認(rèn)給取整了。三是部分安卓手機(jī)出現(xiàn)樣式問(wèn)題。

問(wèn)題一解決,我目前用的是js。如下

<input type="number" oninput="checkTextLength(this ,10)"> 

function checkTextLength(obj, length) {  
      if(obj.value.length > length)  {     
        obj.value = obj.value.substr(0, length);  
      }  
}

問(wèn)題二,是因?yàn)閒orm提交默認(rèn)做了表單驗(yàn)證,step默認(rèn)是1,要設(shè)置step屬性,假如保留2位小數(shù),寫(xiě)法如下:

<input type="number" step="0.01" />

關(guān)于step,我在這里做簡(jiǎn)單的介紹,input 中type=number,一般會(huì)自動(dòng)生成一個(gè)上下箭頭,點(diǎn)擊上箭頭默認(rèn)增加一個(gè)step,點(diǎn)擊下箭頭默認(rèn)會(huì)減少一個(gè)step。number中默認(rèn)step是1。也就是step=0.01,可以允許輸入2位小數(shù),并且點(diǎn)擊上下箭頭分別增加0.01和減少0.01。

假如step和min一起使用,那么數(shù)值必須在min和max之間。

看下面的例子:

<input type="number" step="3.1" min="1" />

輸入框可以輸入哪些數(shù)字?

首先,最小值是1,那么可以輸入1.0,第二個(gè)是可以輸入(1+3.1)那就是4.1,以此類(lèi)推,每次點(diǎn)擊上下箭頭都會(huì)增加或者減少3.1,輸入其他數(shù)字無(wú)效。這就是step的簡(jiǎn)單介紹。

問(wèn)題三,去除input默認(rèn)樣式

input[type=number] {
  -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

28、ios 設(shè)置input 按鈕樣式會(huì)被默認(rèn)樣式覆蓋

解決方式如下:

input,
textarea {
  border: 0; 
  -webkit-appearance: none; 
}

設(shè)置默認(rèn)樣式為none

29、IOS鍵盤(pán)字母輸入,默認(rèn)首字母大寫(xiě)

解決方案,設(shè)置如下屬性

<input type="text" autocapitalize="off" />

30、select 下拉選擇設(shè)置右對(duì)齊

設(shè)置如下:

select option {
direction: rtl;
}

31、通過(guò)transform進(jìn)行skew變形,rotate旋轉(zhuǎn)會(huì)造成出現(xiàn)鋸齒現(xiàn)象

可以設(shè)置如下:

 -webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
  transform: rotate(-4deg) skew(10deg) translateZ(0);
  outline: 1px solid rgba(255,255,255,0)

32、移動(dòng)端點(diǎn)擊300ms延遲

300ms尚可接受,不過(guò)因?yàn)?00ms產(chǎn)生的問(wèn)題,我們必須要解決。300ms導(dǎo)致用戶(hù)體驗(yàn)并不是很好,解決這個(gè)問(wèn)題,我們一般在移動(dòng)端用tap事件來(lái)取代click事件。

推薦兩個(gè)js,一個(gè)是fastclick,一個(gè)是tap.js

關(guān)于300ms延遲,具體請(qǐng)看:http://thx.github.io/mobile/300ms-click-delay/

33、移動(dòng)端點(diǎn)透問(wèn)題

案例如下:

<div id="haorooms">點(diǎn)頭事件測(cè)試</div>

<a href="www.dbjr.com.cn">www.dbjr.com.cn</a>

div是絕對(duì)定位的蒙層,并且z-index高于a。而a標(biāo)簽是頁(yè)面中的一個(gè)鏈接,我們給div綁定tap事件:

$('#haorooms').on('tap',function(){
$('#haorooms').hide();
});

我們點(diǎn)擊蒙層時(shí) div正常消失,但是當(dāng)我們?cè)赼標(biāo)簽上點(diǎn)擊蒙層時(shí),發(fā)現(xiàn)a鏈接被觸發(fā),這就是所謂的點(diǎn)透事件。

原因:

touchstart 早于 touchend 早于click。 亦即click的觸發(fā)是有延遲的,這個(gè)時(shí)間大概在300ms左右,也就是說(shuō)我們tap觸發(fā)之后蒙層隱藏, 此時(shí) click還沒(méi)有觸發(fā),300ms之后由于蒙層隱藏,我們的click觸發(fā)到了下面的a鏈接上。
解決:

(1)盡量都使用touch事件來(lái)替換click事件。例如用touchend事件(推薦)。
(2)用fastclick,https://github.com/ftlabs/fastclick
(3)用preventDefault阻止a標(biāo)簽的click
(4)延遲一定的時(shí)間(300ms+)來(lái)處理事件 (不推薦)
(5)以上一般都能解決,實(shí)在不行就換成click事件。
下面介紹一下touchend事件,如下:

$("#haorooms").on("touchend", function (event) {
   event.preventDefault();

 });

34、消除 IE10 里面的那個(gè)叉號(hào)

input:-ms-clear{display:none;}

35、關(guān)于 iOS 與 OS X 端字體的優(yōu)化(橫豎屏?xí)霈F(xiàn)字體加粗不一致等)

iOS 瀏覽器橫屏?xí)r會(huì)重置字體大小,設(shè)置 text-size-adjust 為 none 可以解決 iOS 上的問(wèn)題,但桌面版 Safari 的字體縮放功能會(huì)失效,因此最佳方案是將 text-size-adjust 為 100% 。

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

36、關(guān)于 iOS 系統(tǒng)中,中文輸入法輸入英文時(shí),字母之間可能會(huì)出現(xiàn)一個(gè)六分之一空格

可以通過(guò)正則去掉

this.value = this.value.replace(/\u2006/g, '');

37、移動(dòng)端 HTML5 audio autoplay 失效問(wèn)題

這個(gè)不是 BUG,由于自動(dòng)播放網(wǎng)頁(yè)中的音頻或視頻,會(huì)給用戶(hù)帶來(lái)一些困擾或者不必要的流量消耗,所以蘋(píng)果系統(tǒng)和安卓系統(tǒng)通常都會(huì)禁止自動(dòng)播放和使用 JS 的觸發(fā)播放,必須由用戶(hù)來(lái)觸發(fā)才可以播放。

解決方法思路:先通過(guò)用戶(hù) touchstart 觸碰,觸發(fā)播放并暫停(音頻開(kāi)始加載,后面用 JS 再操作就沒(méi)問(wèn)題了)。

解決代碼:

document.addEventListener('touchstart', function () {
  document.getElementsByTagName('audio')[0].play();
  document.getElementsByTagName('audio')[0].pause();
});

38、移動(dòng)端 HTML5 input date 不支持 placeholder 問(wèn)題

這個(gè)我感覺(jué)沒(méi)有什么好的解決方案,用如下方法

復(fù)制代碼 代碼如下:

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">

有的瀏覽器可能要點(diǎn)擊兩遍!

39、部分機(jī)型存在type為search的input,自帶close按鈕樣式修改方法

有些機(jī)型的搜索input控件會(huì)自帶close按鈕(一個(gè)偽元素),而通常為了兼容所有瀏覽器,我們會(huì)自己實(shí)現(xiàn)一個(gè),此時(shí)去掉原生close按鈕的方法為

#Search::-webkit-search-cancel-button{
  display: none;  
}

如果想使用原生close按鈕,又想使其符合設(shè)計(jì)風(fēng)格,可以對(duì)這個(gè)偽元素的樣式進(jìn)行修改。

40、喚起select的option展開(kāi)

zepto方式:

$(sltElement).trrgger("mousedown");

原生js方式:

function showDropdown(sltElement) {
  var event;
  event = document.createEvent('MouseEvents');
  event.initMouseEvent('mousedown', true, true, window);
  sltElement.dispatchEvent(event);
};

相關(guān)文章

最新評(píng)論