Meta标簽:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0;" name="viewport" />
這個想必大家都知道,當頁面在手機上顯示時,增加這個meta可以使頁面強制讓文檔的寬度與裝置的寬度保持:,并且文檔最大的寬度比例是,且不允許使用者點選螢幕放大浏覽。
<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都支援
屏蔽陰影:
-webkit-appearance:none
親測,可以同時屏蔽輸入框怪異的内陰影,解決iOS下無法修改按鈕樣式,測試還發現一個小問題就是,加了上面的屬性後,iOS下預設還是帶有圓角的,不過可以使用border-radius屬性修改。
css之border-box:
element{
width: %;
padding-left: px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
border: px solid blue;
}
那我想要一個元素%顯示,又必須有一個固定的padding-left/padding-right,還有px的邊框,怎麼辦?這樣編寫代碼必然導緻出現橫向滾動條,腫麼辦?要相信問題就是用來解決的。這時候偉大的css3為我們提供了box-sizing屬性,對于這個屬性的具體解釋不做贅述(想深入了解的同學可以到w3school檢視,要知道自己動手會更容易記憶)。讓我們看看如何解決上面的問題:
css3多文本換行:
p {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: ;
-webkit-box-orient: vertical;
}
Webkit支援一個名為-webkit-line-clamp的屬性,也就是說這個屬性并不是标準的一部分,可能是Webkit内部使用的,或者被棄用的屬性。需要注意的是display需要設定成box,-webkit-line-clamp表示需要顯示幾行。
Retina螢幕高清圖檔:
selector {
background-image: none;
background: image-set(url(foo-lowres.png) x,url(foo-highres.png) x)
center;
}
image-set的文法,類似于不同的文本,圖像也會顯示成不同的:
不支援image-set:在不支援image-set的浏覽器下,他會支援background-image圖像,也就是說不支援image-set的浏覽器下,他們解析background-image中的背景圖像;
支援image-set:如果你的浏覽器支援image-sete,而且是普通顯屏下,此時浏覽器會選擇image-set中的@x背景圖像;
Retina螢幕下的image-set:如果你的浏覽器支援image-set,而且是在Retina螢幕下,此時浏覽器會選擇image-set中的@x背景圖像。
html5重力感應事件:
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}
var speed = ;//speed
var x = y = z = lastX = lastY = lastZ = ;
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();
}
lastX = x;
lastY = y;
lastZ = z;
}
關于deviceMotionEvent是HTML5新增的事件,用來檢測手機重力感應效果具體可參考http://w3c.github.io/deviceorientation/spec-source-orientation.html
移動端touch事件:
touchstart //當手指接觸螢幕時觸發
touchmove //當已經接觸螢幕的手指開始移動後觸發
touchend //當手指離開螢幕時觸發
touchcancel//當某種touch事件非正常結束時觸發
這個事件的觸發順序為:
touchstart -> touchmove -> touchend ->touchcancel
對于某些android系統touch的bug:
比如手指在螢幕由上向下拖動頁面時,理論上是會觸發 一個touchstart ,很多次touchmove,和最終的touchend,可是在android 上,touchmove隻被觸發一次,觸發時間和touchstart差不多,而touchend直接沒有被觸發。這是一個非常嚴重的bug,在google Issue已有不少人提出,這個很蛋疼的bug是在模拟下拉重新整理是遇到的尤其當touchmove的dom節點數量變多時比出現,當時解決辦法就是用settimeout來稀釋touchmove。
單擊延遲:
click事件因為要等待輕按兩下确認,會有ms的延遲,體驗并不是很好。
開發者大多數會使用封裝的 tap 事件來代替click 事件,所謂的 tap 事件由 touchstart 事件+touchmove判斷+touchend事件封裝組成。
Creating Fast Buttons for Mobile Web Applications
Eliminate ms delay on click events in mobile Safari
IOS裡面fixed的文本框焦點居中
<!DOCTYPE html>
<head>
input {
position:fixed;
top:;left:;
}
</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的preventDefault
base64編碼圖檔替換url圖檔
u在移動端,網絡請求是很珍貴的資源,尤其在2g或者3g網絡下,是以能不發請求的資源都盡量不要發,對于一些小圖檔icon之類的,可以将圖檔用base64編碼,來減少網絡請求。
手機拍照和上傳圖檔
<input type=”file”>的accept 屬性
<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視訊 -->
<input type=file accept="video/*">
動畫效果時開啟硬體加速
我們在制作動畫效果時經常會想要改版元素的top或者left來讓元素動起來,在pc端還好但是移動端就會有較大的卡頓感,這幺我們需要使用css3的transform: translate3d;來替換,
此效果可以讓浏覽器開啟gpu加速,渲染更流暢,但是筆着實驗時在ios上體驗良好,但在一些低端android機型可能會出現意想不到的效果。
快速回彈滾動
在iOS上如果你想讓一個元素擁有像 Native 的滾動效果,你可以這樣做:
.div {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
經筆者測試,此效果在不同的ios系統表現不一緻:
對于局部滾動,ios8以上,不加此效果,滾動的超級慢,ios8一下,不加此效果,滾動還算比較流暢
對于body滾動,ios8以上,不加此效果同樣擁有彈性滾動效果。
持續更新中。。
**ios和android局部滾動時隐藏塬生滾動條**
android
::-webkit-scrollbar{
opacity: 0;
}
ios
使用一個稍微高一些div包裹住這個有滾動條的div然後設定overflow:hidden擋住之
.wrap{
height: 100px;
overflow: hidden;
}
.box{
width: 100%;
height: -webkit-calc(100% + 5px);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
<div class="wrap">
<div class="box"></div>
</div>
設定placeholder時候 focus時候文字沒有隐藏
input:focus::-webkit-input-placeholder{
opacity: 0;
}
移動端不同的input對應不同的鍵盤展示樣式
ios —- android
type email
type url
type tel
type search
參考資料:http://www.nihaoshijie.com.cn/index.php/archives/455
來源AlloyTeam:http://www.alloyteam.com/2015/06/yi-dong-web-wen-ti-xiao-jie/