移動web問題小結
本文主要收集一些移動web開發中常見的問題和解決辦法,在日常的工作中遇到新的問題會不定時更新到文章中。
遮蔽陰影:
-webkit-appearance:none
親測,可以同時遮蔽輸入框怪異的內陰影,解決iOS下無法修改按鈕樣式,測試還發現一個小問題就是,加了上面的屬性後,iOS下預設還是帶有圓角的,不過可以使用 border-radius屬性修改。
Meta標籤:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
這個想必大家都知道,當頁面在手機上顯示時,增加這個meta可以讓頁面強制讓文件的寬度與裝置的寬度保持1:1,並且文件最大的寬度比例是1.0,且不允許使用者點選螢幕放大瀏覽。
<meta content="telephone=no" name="format-detection" /> <meta content="email=no" name="format-detection" />
這兩個屬性分別對ios上自動識別電話和android上自動識別郵箱做了限制。
獲取滾動條的值:
window.scrollY window.scrollX
桌面瀏覽器中想要獲取滾動條的值是通過document.scrollTop和document.scrollLeft得到的,但在iOS中你會發現這兩個屬性是未定義的,為什麼呢?因為在iOS中沒有滾動條的概念,在Android中通過這兩個屬性可以正常獲取到滾動條的值,那麼在iOS中我們該如何獲取滾動條的值呢?就是上面兩個屬性,但是事實證明android也支援這屬性,所以索性都用woindow.scroll.
禁止選擇文字:
-webkit-user-select:none
禁止使用者選擇文字,ios和android都支援
css之border-box:
element{ width: 100%; padding-left: 10px; box-sizing:border-box; -webkit-box-sizing:border-box; border: 1px solid blue; }
那我想要一個元素100%顯示,又必須有一個固定的padding-left/padding-right,還有1px的邊框,怎麼辦?這樣編寫程式碼必然導致出現橫向滾動條,腫麼辦?要相信問題就是用來解決的。這時候偉大的css3為我們提供了box-sizing屬性,對於這個屬性的具體解釋不做贅述(想深入瞭解的同學可以到w3school檢視,要知道自己動手會更容易記憶)。讓我們看看如何解決上面的問題:
css3多文字換行:
p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
Webkit支援一個名為-webkit-line-clamp的屬性,參見連結,也就是說這個屬性並不是標準的一部分,可能是Webkit內部使用的,或者被棄用的屬性。需要注意的是display需要設定成box,-webkit-line-clamp表示需要顯示幾行。
Retina螢幕高清圖片:
selector { background-image: url(no-image-set.png); background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center; }
image-set的語法,類似於不同的文字,影象也會顯示成不同的:
不支援image-set:在不支援image-set的瀏覽器下,他會支援background-image影象,也就是說不支援image-set的瀏覽器下,他們解析background-image中的背景影象;支援image-set:如果你的瀏覽器支援image-sete,而且是普通顯屏下,此時瀏覽器會選擇image-set中的@1x背景影象;Retina螢幕下的image-set:如果你的瀏覽器支援image-set,而且是在Retina螢幕下,此時瀏覽器會選擇image-set中的@2x背景影象。
html5重力感應事件:
if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); } var speed = 30;//speed var x = y = z = lastX = lastY = lastZ = 0; function deviceMotionHandler(eventData) { var acceleration =event.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) { //簡單的搖一搖觸發程式碼 alert(1); } lastX = x; lastY = y; lastZ = z; }
關於deviceMotionEvent是html5新增的事件,用來檢測手機重力感應效果具體可參考http://w3c.github.io/deviceorientation/spec-source-orientation.html
移動端touch事件:
- touchstart //當手指接觸螢幕時觸發touchmove //當已經接觸螢幕的手指開始移動後觸發touchend //當手指離開螢幕時觸發touchcancel//當某種touch事件非正常結束時觸發
這4個事件的觸發順序為: touchstart -> touchmove -> touchend ->touchcancel 對於某些android系統touch的bug: 比如手指在螢幕由上向下拖動頁面時,理論上是會觸發 一個 touchstart ,很多次 touchmove ,和最終的 touchend ,可是在android 4.0上,touchmove只被觸發一次,觸發時間和touchstart 差不多,而touchend直接沒有被觸發。這是一個非常嚴重的bug,在google Issue已有不少人提出 ,這個很蛋疼的bug是在模擬下拉重新整理是遇到的尤其當touchmove的dom節點數量變多時比出現,當時解決辦法就是用settimeout來稀釋touchmove。
單擊延遲:
click 事件因為要等待雙擊確認,會有 300ms 的延遲,體驗並不是很好。 開發者大多數會使用封裝的 tap 事件來代替click 事件,所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。Creating Fast Buttons for Mobile Web ApplicationsEliminate 300ms delay on click events in mobile Safari
IOS裡面fixed的文字框焦點居中
<!DOCTYPE html> <head> input { position:fixed; top:0;left:0; } </head> <body> <div class="header"> <form action=""> <label>Testfield: <input type="text" /></label> </form> </div> </body> </html>
在ios裡面,當一個文字框的樣式為fixed時候,如果這個文字框獲得焦點,它的位置就會亂掉,由於ios裡面做了自適應居中,這個fixed的文字框會跑到頁面中間。類似:解決辦法有兩個:可以在文字框獲得焦點的時候將fixed改為absolute,失去焦點時在改回fixed,但是這樣會讓螢幕有上下滑動的體驗不太好。
.fixfixed { position:absolute; } $(document) .on('focus', 'input', function(e) { $this.addClass('fixfixed'); }) .on('blur', 'input', function(e) { $this.removeClass('fixfixed'); });
還有一種就是用一個假的fixed的文字框放在頁面頂部,一個absolute的文字框隱藏在頁面頂部,當fixed的文字框獲得焦點時候將其隱藏,然後顯示absolute的文字框,當失去焦點時,在把absolute的文字框隱藏,fixed的文字框顯示。
.fixfixed { position:absolute; } $(document) .on('focus', 'input', function(e) { $absolute..show(); $this.hide(); }) .on('blur', 'input', function(e) { $fixed..show(); $this.hide(); });
最後一種就是頂部的input不參與滾動,只讓其下面滾動。
position:sticky
position:sticky是一個新的css3屬性,它的表現類似position:relative和position:fixed的合體,在目標區域在螢幕中可見時,它的行為就像position:relative; 而當頁面滾動超出目標區域時,它的表現就像position:fixed,它會固定在目標位置。
.sticky { position: -webkit-sticky; position:sticky; top: 15px; }
瀏覽器相容性:由於這是一個全新的屬性,以至於到現在都沒有一個規範,W3C也剛剛開始討論它,而現在只有webkit nightly版本和chrome 開發版(Chrome 23.0.1247.0+ Canary)才開始支援它。 另外需要注意的是,如果同時定義了left和right值,那麼left生效,right會無效,同樣,同時定義了top和bottom,top贏~~移動端點透事件簡單的說,由於在移動端我們經常會使用tap(touchstart)事件來替換掉click事件,那麼就會有一種場景是:
<div id="mengceng"></div> <a href="www.qq.com">www.qq.com</a>
div是絕對定位的蒙層z-index高於a,而a標籤是頁面中的一個連結,我們給div繫結tap事件:
$('#mengceng').on('tap',function(){ $('#mengceng').hide(); });
我們點選蒙層時div正常消失,但是當我們在a標籤上點選蒙層時,發現a連結被觸發,這就是所謂的點透事件。 原因:touchstart 早於 touchend 早於 click。亦即click的觸發是有延遲的,這個時間大概在300ms左右,也就是說我們tap觸發之後蒙層隱藏,此時click還沒有觸發,300ms之後由於蒙層隱藏,我們的click觸發到了下面的a連結上。解決辦法: 1 儘量都使用touch事件來替換click事件。 2 阻止a連結的click的preventDefaultbase64編碼圖片替換url圖片u在移動端,網路請求是很珍貴的資源,尤其在2g或者3g網路下,所以能不發請求的資源都儘量不要發,對於一些小圖片icon之類的,可以將圖片用base64編碼,來減少網路請求。
手機拍照和上傳圖片
的accept 屬性
<!-- 選擇照片 --> <input type=file accept="image/*"> <!-- 選擇視訊 --> <input type=file accept="video/*">
動畫效果時開啟硬體加速
我們在製作動畫效果時經常會想要改版元素的top或者left來讓元素動起來,在pc端還好但是移動端就會有較大的卡頓感,這麼我們需要使用css3的 transform: translate3d;來替換, 此效果可以讓瀏覽器開啟gpu加速,渲染更流暢,但是筆著實驗時在ios上體驗良好,但在一些低端android機型可能會出現意想不到的效果。
素材公社https://www.wode007.com/sites/73209.html 愛圖網https://www.wode007.com/sites/73208.html
快速回彈滾動
在iOS上如果你想讓一個元素擁有像 Native 的滾動效果,你可以這樣做:
.div { overflow: auto; -webkit-overflow-scrolling: touch; }
經筆著測試,此效果在不同的ios系統表現不一致, 對於區域性滾動,ios8以上,不加此效果,滾動的超級慢,ios8一下,不加此效果,滾動還算比較流暢 對於body滾動,ios8以上,不加此效果同樣擁有彈性滾動效果。
ios和android區域性滾動時隱藏原生滾動條
android
::-webkit-scrollbar{ opacity: 0; } <p>ios 使用一個稍微高一些div包裹住這個有滾動條的div然後設定overflow:hidden擋住之</p> ```css .wrap{ height: 100px; overflow: hidden; } .box{ width: 100%; height: -webkit-calc(100% + 5px); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } <div> <div></div> </div>
設定placeholder時候 focus時候文字沒有隱藏
input:focus::-webkit-input-placeholder{ opacity: 0; }
移動端不同的input對應不同的鍵盤展示樣式
ios —- android type email type url type tel type search
background-image和image的載入區別
在網頁載入的過程中,以css背景圖存在的圖片background-image會等到結構載入完成(網頁的內容全部顯示以後)才開始載入,而html中的標籤img是網頁結構(內容)的一部分會在載入結構的過程中載入,換句話講,網頁會先載入標籤img的內容,再載入背景圖片background-image,如果你用引入了一個很大的圖片,那麼在這個圖片下載完成之前,img後的內容都不會顯示。而如果用css來引入同樣的圖片,網頁結構和內容載入完成之後,才開始載入背景圖片,不會影響你瀏覽網頁內容。