整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
本上所有的PC端事件移動端都可以用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100vw;
height: 50vh;
background-color: orange;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
//基本上所有的PC端事件移動端都可以用
var div=document.getElementsByTagName("div")[0];
/*div.onclick=function(){
this.style.backgroundColor="green";
}*/
div.onmouseover=function(){
this.style.backgroundColor="blue";
}
</script>
</body>
</html>移動端特有的事件
ontouchstart 手指按下
ontouchmove 手指移動
ontouchend 手指抬起
ontouchcancel 移動端發生了觸摸中斷, 這個事件不容易在瀏覽器的模擬器中模擬, 實際中用的很少。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100vw;
height: 50vh;
background-color: orange;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
//基本上所有的PC端事件移動端都可以用
var div=document.getElementsByTagName("div")[0];
//移動端事件我們通過DOM2級進行綁定
/*div.ontouchstart=function(){
this.innerText +="手指按下";
}*/
//div.addEventListener(事件名稱(不加on),執行函數,是否捕獲)
//div.attachEvent(事件名稱(加on),執行函數)
div.addEventListener("touchstart",function(){
this.innerText="手指按下";
},false)
</script>
</body>
</html>移動端事件監聽
ETA標簽：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
這個想必大家都知道，當頁面在手機上顯示時，增加這個meta可以讓頁面強制讓文檔的寬度與設備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽。
PS：在設置了initial-scale=1 之后，我們終于可以以1:1 的比例進行頁面設計了。關于viewport，還有一個很重要的概念是：iphone 的safari 瀏覽器完全沒有滾動條，而且不是簡單的”隱藏滾動條”，是根本沒有這個功能。iphone 的safari 瀏覽器實際上從一開始就完整顯示了這個網頁，然后用viewport 查看其中的一部分。當你用手指拖動時，其實拖的不是頁面，而是viewport。瀏覽器行為的改變不止是滾動條，交互事件也跟普通桌面不一樣。
<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: 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 -> touchmove ->touchend
對于某些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 Applications
Eliminate 300ms delay on click events in mobile Safari
IOS里面FIXED的文本框焦點居中
<!DOCTYPE html>
<head>
input {
positionLfixed;
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的文本框會跑到頁面中間。類似：
移動web問題小結
解決辦法有兩個：
可以在文本框獲得焦點的時候將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以上，不加此效果同樣擁有彈性滾動效果。
如何做一個簡單的手機端頁面的翻頁】
第一步：創建移動端頁面內 HTML + CSS 【注】可用彈性布局 但需要注意的是 外層盒子的定位
第二步： 思考問題 要實現怎樣的效果？
1. 手指滑動時觸發事件【左右】兩個方向
2.點擊footer部分的下標實現切換效果
3.點擊footer部分的下標實現下標顏色變化
第三步；編寫JS代碼
添加監聽事件
document.addEventListener('DOMContentLoaded',function(){
創建一個數組用于調用數組屬性值 或者 方便【數值】的更改 【注】可以用數組 /對象 但對象更方便我們的使用
var postion={
startX:0,
startY:0,
endX:0,
endY:0,
baseMoveX: window.innerHeight / 3,
index:1
}
獲取頁面元素 比不可少的一個步驟
var tab2=document.getElementsByClassName('tab2')[0];//獲取到ul 思路： 用ul定位來實現頁面的切換 （ul的寬度設置成 innerWind * 4）
var li2=document.getElementsByClassName('li2');//索引值不確定 且不寫先
var tab3=document.querySelector('#tab3');
var li3=document.querySelectorAll('.li3');
li3[0].style.color='#58bc58';//設置默認的第一個下標的顏色
//封裝一個函數用于清空下標 的顏色
function delite(){
for(var i=0;i < li3.length; i++){
li3[i].style.color='';
}
}
手指事件【注】 這里的原理和拖拽一抹一樣 （手指按下和 手指移動是 時 必須給給記錄 光標位置）
手指移動到位置上時候觸發 記錄鼠標移動坐標
tab2.addEventListener('touchstart',function(e){
postion.startX=e.touches[0].clientX;
postion.startY=e.touches[0].clientY;
})
手指移動位置胡時候觸發 記錄鼠標移動坐標
tab2.addEventListener('touchmove',function(en){
postion.endX=en.touches[0].clientX;
postion.endY=en.touches[0].clientY;
move();//當手指滑動時觸發函數 改變ul的定位
})
手指移開的時候定位
tab2.addEventListener('touchend',function(vent){
move(true);//手指松開時調用調用函（函數用于判斷 ：滑動的距離是否超過絕對值 1.超過 (滑動到下一頁) 2.不超過 (位置定位在當前頁)）
})
function move(_end){
var x=postion.startX - postion.endX;
var y=postion.startY - postion.endY;
滑動效果
if(postion.index < li2.length){//第一種情況==========left [用if 判斷：索引值是 1-3的時候可以 向左滑動 改變 ul的定位 【注】因為超出會造成用戶滑動出現空白頁面 ]
if(x > 0){//計算公式： 起點位置 - 終點位置=x; 如果 x > 0 說明滑動的方向是左邊
to left
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
