移動端筆記
阿新 • • 發佈：2017-07-22
標簽 fix 獲取屏幕寬度 lock 手指 add cli wrap stop 1、像素比：
點、points （抽象單位 ）
像素渲染 （柵格化）
物理像素 （調整大小）
dpi、ppi
獲取像素比 （window.devicePixelRatio）
2、viewport（視口）
width 設備寬度 [pixel_value | device-width]
user-scalable 是否允許縮放 （no||yes）
initial-scale 初始比例
minimum-scale 允許縮放的最小比例
maximum-scale 允許縮放的最大比例
target-densitydpi (已淘汰)
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
同時設置initial-scale和minimum-scale、maximum-scale的值都相同，雙保險兼容。
根據不同設備JS動態控制比例 1/像素比：動態生成viewport
<script>
</script>
3、單位比較
1）px 絕對（固定）單位
缺點：任何情況下都是固定值，會導致布局在不同尺寸的設備下錯位
2）%相對單位（會有影響發生變化） 相對於父級（自身）大小進行計算
缺點：能確定範圍的還是比較好計算的，對於不太好確定值的地方不好使用百分比。並且，會導致變形。
3）em 相對單位（會有影響發生變化） em = 當前字體大小
缺點：會根據當前容器字體大小發生變化，假如每個容器字體大小不一致，那麽計算會非常麻煩。
4）rem 相對單位：1rem=設置html的字體大小。只依賴於html字體大小。r = root、em = 字體大小 font size。
動態設置rem，適配所有移動設備：
<script>
</script> 橫豎屏適配： setRem(); window.addEventListener("orientationchange", setRem); //手機適配事件 window.addEventListener("resize", setRem); //方便chrome查看 function setRem() { var html = document.querySelector("html"); var width = html.getBoundingClientRect().width; html.style.fontSize = width / 16 + "px"; }
4、布局步驟
1）確定尺寸（設計稿） 並且還得在符合該尺寸的模擬器下進行第一次預覽
2）搭建大體框架
1）[固定定位]元素內容中有[input]的話，會導致觸發鍵盤之後導致固定定位錯位。(換成絕對定位解決) 2）不管使用背景圖還是img，一定要調整對應的size（大小） 如果圖片大小和容器大小一致，那麽可以使用100% 如果圖片大小和容器帶下不一樣，那麽需針對圖片分別設置寬/高、x/y 3）碰到文字，一定要測量行高，不然高度會不準確 4）標簽的特性需要熟記於心
5、標簽兼容：
1)固定定位fixed不兼容，為實現position：fixed：
設置html的overflow為hidden，隱藏滾動條
設置body的overflow為auto，把滾動條給body
html{
body{
header{
2)取消a標簽手指按下時出現的黑色遮罩層
a,input,button{
}
3) 解決IOS下的表單元素圓角的問題
input,button{
6、移動端基本事件：
touchstart 手指觸摸 == mousedown
touchend 手指擡起 == mouseup
touchmove 手指移動 == mousmove
1）touch事件 在 chrome的模擬器下，部分版本 通過on的方式來添加事件無效
var box = document.querySelector(".box");
box.ontouchstart = function () {
解決方法：addEventListener("事件名",函數,冒泡或捕獲);
不會存在前後覆蓋問題
在chrome的模擬器下可以一直識別
box.addEventListener(
"touchstart",
function() {
console.log(2);
}
);
box.addEventListener(
"touchstart",
fn
);
function fn() {
console.log(3);
}
2）
冒泡 ：點擊元素 他會把這個事件一直向上傳遞 從下向上傳遞
捕獲 ：從上向下傳遞
var box = document.querySelector(".box");
box.addEventListener(
"touchstart",
function(ev) {
console.log(ev);
},
false
);
3）阻止頁面上的文字選中和系統菜單
document.addEventListener(
"touchstart",
function(e) {
e.preventDefault();
}
);
/*
e.preventDefault(); 阻止默認事件
阻止掉：document touchstart的默認事件，可以解決一下問題：
1. 阻止頁面上的文字被選中 -- 可以通過阻止冒泡使某個元素上的文字被選中
2. 阻止頁面上的系統菜單
隱患:
頁面上的所有滾動條失效
*/
window.onload = function () {
4）阻止系統默認的下拉回彈效果
阻止 document的 touchstart 或者 touchmove，可以清除系統默認的回彈
document.addEventListener(
5）事件點透問題：
<a href="http://www.baidu.com">百度</a>
<div id="div"></div>
<script>
6）防止手指誤觸點擊a鏈接、也是解決事件點透的方法
document.addEventListener(
window.onload = function () {
7、touches、targetTouches、changedTouches
touches 當前屏幕上的手指列表 （一個手指數組長度為1）
targetTouches 當前元素上的手指列表
changedTouches 觸發當前事件的手指列表（離開時觸發）
獲取手指所觸發事件時的坐標：
var box = document.querySelector("#box"); box.addEventListener(
8、滑屏操作：
<style>
<script>
/*
1.手指按下去的時候，記錄下手指坐標
2.移動的時候，記錄手指坐標
3.用移動後的坐標 - 移動前的坐標 = 手指 移動的距離
4.手指按下去的時候，記錄下元素的位置
5.移動之後，元素的初始位置+用手指移動的距離 = 元素現在所要在的位置 */
window.onload = function () {
var wrap = document.querySelector("#wrap");
var scroll = document.querySelector("#scroll");
var startPoint = 0;
var startEl = 0;
//外面盒子的可視高度減去裏面盒子的原本高度
var maxTop = wrap.clientHeight - scroll.offsetHeight;
//console.log(maxTop); maxTop是個負值
wrap.addEventListener(
"touchstart",
function(e) {
var touch = e.changedTouches[0];
startPoint = touch.pageY;
startEl = scroll.offsetTop;//元素的初始位置
}
);
wrap.addEventListener(
"touchmove",
function(e) {
var touch = e.changedTouches[0];
var nowPoint = touch.pageY;
var dis = nowPoint - startPoint;
var top = startEl + dis;
if(top > 0) {
top = 0;
}
if(top < maxTop) {
top = maxTop;
}
scroll.style.top = top +"px";
}
);
};
</script>
</head>
<body>
<div id="wrap">
</body>
</html>
點、points （抽象單位 ）
像素渲染 （柵格化）
物理像素 （調整大小）
dpi、ppi
獲取像素比 （window.devicePixelRatio）
2、viewport（視口）
width 設備寬度 [pixel_value | device-width]
user-scalable 是否允許縮放 （no||yes）
initial-scale 初始比例
minimum-scale 允許縮放的最小比例
maximum-scale 允許縮放的最大比例
target-densitydpi (已淘汰)
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
同時設置initial-scale和minimum-scale、maximum-scale的值都相同，雙保險兼容。
根據不同設備JS動態控制比例 1/像素比：動態生成viewport
<script>
//獲取設備的像素比 //console.log(window.devicePixelRatio); //控制比例:1/像素比 var pixelRatio = 1 / window.devicePixelRatio; //通過js動態設置視口(viewport) document.write(‘<meta name="viewport" content="width=device-width,initial-scale=‘+pixelRatio+‘,minimum-scale=‘+pixelRatio+‘,maximum-scale=‘+pixelRatio+‘" />‘);
</script>
3、單位比較
1）px 絕對（固定）單位
缺點：任何情況下都是固定值，會導致布局在不同尺寸的設備下錯位
2）%相對單位（會有影響發生變化） 相對於父級（自身）大小進行計算
缺點：能確定範圍的還是比較好計算的，對於不太好確定值的地方不好使用百分比。並且，會導致變形。
3）em 相對單位（會有影響發生變化） em = 當前字體大小
缺點：會根據當前容器字體大小發生變化，假如每個容器字體大小不一致，那麽計算會非常麻煩。
4）rem 相對單位：1rem=設置html的字體大小。只依賴於html字體大小。r = root、em = 字體大小 font size。
動態設置rem，適配所有移動設備：
<script>
// 條件：尺寸越大，則字體大小越大。尺寸越小，則字體大小越小。// 獲取html節點 var html = document.getElementsByTagName(‘html‘)[0]; // 獲取屏幕寬度 var pageWidth = html.getBoundingClientRect().width; //或者通過document.documentElement.clientWidth獲取寬度 // 設置html的font-size大小：屏幕寬度 / 固定數值 = 基準值（基準值任何整數都行） html.style.fontSize = pageWidth / 16 + "px";
</script> 橫豎屏適配： setRem(); window.addEventListener("orientationchange", setRem); //手機適配事件 window.addEventListener("resize", setRem); //方便chrome查看 function setRem() { var html = document.querySelector("html"); var width = html.getBoundingClientRect().width; html.style.fontSize = width / 16 + "px"; }
4、布局步驟
1）確定尺寸（設計稿） 並且還得在符合該尺寸的模擬器下進行第一次預覽
2）搭建大體框架
1）[固定定位]元素內容中有[input]的話，會導致觸發鍵盤之後導致固定定位錯位。(換成絕對定位解決) 2）不管使用背景圖還是img，一定要調整對應的size（大小） 如果圖片大小和容器大小一致，那麽可以使用100% 如果圖片大小和容器帶下不一樣，那麽需針對圖片分別設置寬/高、x/y 3）碰到文字，一定要測量行高，不然高度會不準確 4）標簽的特性需要熟記於心
5、標簽兼容：
1)固定定位fixed不兼容，為實現position：fixed：
設置html的overflow為hidden，隱藏滾動條
設置body的overflow為auto，把滾動條給body
html{
width: 100%; height: 100%; overflow: hidden;}
body{
width: 100%; height: 100%; overflow: auto;}
header{
width:100% height:xxrem; position:absolute; top:0; left:0;}
2)取消a標簽手指按下時出現的黑色遮罩層
a,input,button{
-webkit-tap-highlight-color: transparent; text-decoration: none;
}
3) 解決IOS下的表單元素圓角的問題
input,button{
-webkit-appearance: none; margin: 0; padding: 0; border: none;} 4)iPhone 和 Android 的瀏覽器縱向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自動調整字體大小的功能。 控制它的就是 CSS 中的 -webkit-text-size-adjust。 text-size-adjust 設為 none 或者 100% 關閉字體大小自動調整功能. -webkit-text-size-adjust: 100%; 5) 兼容的字體： font-family: Helvetica;
6、移動端基本事件：
touchstart 手指觸摸 == mousedown
touchend 手指擡起 == mouseup
touchmove 手指移動 == mousmove
1）touch事件 在 chrome的模擬器下，部分版本 通過on的方式來添加事件無效
var box = document.querySelector(".box");
box.ontouchstart = function () {
this.style.background = "blue";};
解決方法：addEventListener("事件名",函數,冒泡或捕獲);
不會存在前後覆蓋問題
在chrome的模擬器下可以一直識別
box.addEventListener(
"touchstart",
function() {
console.log(2);
}
);
box.addEventListener(
"touchstart",
fn
);
function fn() {
console.log(3);
}
2）
冒泡 ：點擊元素 他會把這個事件一直向上傳遞 從下向上傳遞
捕獲 ：從上向下傳遞
var box = document.querySelector(".box");
box.addEventListener(
"touchstart",
function(ev) {
console.log(ev);
},
false
);
3）阻止頁面上的文字選中和系統菜單
document.addEventListener(
"touchstart",
function(e) {
e.preventDefault();
}
);
/*
e.preventDefault(); 阻止默認事件
阻止掉：document touchstart的默認事件，可以解決一下問題：
1. 阻止頁面上的文字被選中 -- 可以通過阻止冒泡使某個元素上的文字被選中
2. 阻止頁面上的系統菜單
隱患:
頁面上的所有滾動條失效
*/
window.onload = function () {
var box = document.querySelector(".box"); var div = document.querySelector(".div") div.addEventListener( //div中的文字可以被選中
"touchstart",function(e) {
e.stopPropagation();
},false
);
/* 事件函數中 默認的第一個 參數 是 event對象 */};
4）阻止系統默認的下拉回彈效果
阻止 document的 touchstart 或者 touchmove，可以清除系統默認的回彈
document.addEventListener(
"touchmove", function(e) {
e.preventDefault();
});
5）事件點透問題：
<a href="http://www.baidu.com">百度</a>
<div id="div"></div>
<script>
document.addEventListener(
"touchmove",function(e) {
e.preventDefault();
}
); window.onload = function () {
var div = document.querySelector("#div");/*PC端鼠標事件 在移動端也可以正常使用，但是註意 事件的執行 會有300ms的延遲事件點透：1. 在移動端 PC事件(click,mouse..) 有 300ms的延遲2. 我們點擊了頁面之後，瀏覽器會記錄點擊下去的坐標3. 300ms後，在該坐標找到現在在這的元素 執行事件解決辦法：1. 阻止默認事件 (部分安卓機型不支持)2. 不在移動端使用鼠標事件，不用a標簽做頁面跳轉*/div.addEventListener(
"touchend",function (e) {
e.preventDefault();this.style.display = "none";
}
);
};</script>
6）防止手指誤觸點擊a鏈接、也是解決事件點透的方法
document.addEventListener(
"touchstart", function(e) {
e.preventDefault();
});
window.onload = function () {
var a = document.querySelectorAll("a"); for(var i = 0; i < a.length; i++) {
a[i].addEventListener(
"touchmove",function() {
//在進行touchmove事件的時候設置自定義事件isMove為true
this.isMove = true;
}
);a[i].addEventListener(
"touchend",function() {
//當不在進行touchmove事件的時候
if(!this.isMove) {
window.location.href = this.href;
}this.isMove = false;
}
);
}};
7、touches、targetTouches、changedTouches
touches 當前屏幕上的手指列表 （一個手指數組長度為1）
targetTouches 當前元素上的手指列表
changedTouches 觸發當前事件的手指列表（離開時觸發）
獲取手指所觸發事件時的坐標：
var box = document.querySelector("#box"); box.addEventListener(
"touchmove", function (e){
var touch = e.changedTouches[0];this.innerHTML = touch.pageX +"|"+ touch.pageY;
});
8、滑屏操作：
<style>
html {
height: 100%;
} body {
margin: 0;height: 100%;position: relative;overflow: hidden;
} #wrap {
position: absolute;left: 0;top: 0;width: 100%;height: 100%;
} #scroll {
position: absolute;left: 0;top: 0;width: 100%;background: #ccc;
}</style>
<script>
/*
1.手指按下去的時候，記錄下手指坐標
2.移動的時候，記錄手指坐標
3.用移動後的坐標 - 移動前的坐標 = 手指 移動的距離
4.手指按下去的時候，記錄下元素的位置
5.移動之後，元素的初始位置+用手指移動的距離 = 元素現在所要在的位置 */
window.onload = function () {
var wrap = document.querySelector("#wrap");
var scroll = document.querySelector("#scroll");
var startPoint = 0;
var startEl = 0;
//外面盒子的可視高度減去裏面盒子的原本高度
var maxTop = wrap.clientHeight - scroll.offsetHeight;
//console.log(maxTop); maxTop是個負值
wrap.addEventListener(
"touchstart",
function(e) {
var touch = e.changedTouches[0];
startPoint = touch.pageY;
startEl = scroll.offsetTop;//元素的初始位置
}
);
wrap.addEventListener(
"touchmove",
function(e) {
var touch = e.changedTouches[0];
var nowPoint = touch.pageY;
var dis = nowPoint - startPoint;
var top = startEl + dis;
if(top > 0) {
top = 0;
}
if(top < maxTop) {
top = maxTop;
}
scroll.style.top = top +"px";
}
);
};
</script>
</head>
<body>
<div id="wrap">
<div id="scroll"> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br> </div></div>
</body>
</html>
移動端筆記