移動端技巧總結
對移動端開發(fā)和適配的技巧總結，主要從適配和注意事項兩方面進行總結
1.媒介查詢
<style>
@media(min-width: 300px) and (max-width: 320px){
}
</style>
<link rel="" herf="" media="(min-width: 300px) and (max-width: 320px)
2. 手機端加一個meta
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0",maximum-scale=1.0, minimum-scale=1.0>
3. 移動端特點
響應式其實用的不多妙蔗，主要是在一些新聞網站或博客。大型網站多用兩套頁面免猾，無IE
- 手機上沒有hover
- Vue swipe是辕、jQuery swipe；touch事件
- 沒有resize
- 沒有滾動條
4.REM手機專用
4.1什么是REM
- em 一個單位m的寬度猎提，一個漢字的寬度
- rem rootem 根元素html的font-size 16px
4.2REM和EM的區(qū)別
默認的html font-size 是16px
chrome默認最小font-size為12px
em == font-size
區(qū)別em單位自己获三，rem根元素
4.3 手機端方案的特點
百分比布局，無法解決寬高比例的問題
一切單位以寬度為準锨苏，就能完美還原設計稿
4.4 REM使用JS動態(tài)調整疙教，可以和其它單位同時存在
<script>
var pageWidth = window.innerWidth
document.write(`<style>html{font-size: ${pageWidth/10}px}</style>`)
</script>
<style>
* {
margin: 0;
padding: 0;
}
.child{
background: #ddd;
}
body {
font-size: 16px;
}
.child {
width: 4rem;
height: 2rem;
margin: 0.5rem;
float: left;
border: 1px solid red /*特別小的還是用px*/
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
</style>
4.5在scss里使用px2rem
在scss文件里添加
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是設計稿的寬度，根據設計稿的寬度填寫
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
5.點擊300ms延遲
5.1 click產生延遲的原因
單剛開始出現(xiàn)全觸屏手機時的網站都是為桌面端設計的伞租，沒有設置<meta name="viewport">,為了方便手機用戶贞谓，手機瀏覽器添加了雙擊縮放的功能。手指在屏幕上快速點擊兩次肯夏，瀏覽器回將頁面縮放至原始比例经宏。
如何判定用戶雙擊呢？在第一次點擊屏幕后300ms內有第二次點擊驯击，就判定用戶想要縮放而不是點擊頁面元素烁兰；所以當用戶點擊頁面元素300ms后瀏覽器才會響應用戶操作，判定用戶為點擊操作而不是縮放徊都。
5.2 解決方法
-
設置
meta:vp`<meta name="viewport" content="width=device-width">- android添加name=viewport的meta即可消除延遲
- iOS上必須設置屬性
content=“width=device-width”沪斟，統(tǒng)一采用iOS
使用touchstart事件而不是click
使用fastclick庫（2017年以后逐漸不用）
6. 點擊擊穿原因及解決
6.1 什么是點擊穿透
在移動端，比如當用戶通過監(jiān)聽touchstart事件暇矫，綁定監(jiān)聽函數(shù)讓浮層關閉時主之，關閉后浮層后面對應位置頁面其他元素也會被點擊。如果浮層后是一個鏈接李根，用戶點擊浮層關閉后大約300ms頁面同時發(fā)生跳轉
6.2 產生原因
觸屏設備為了區(qū)分用戶雙擊縮放槽奕，對click做了300ms延遲觸發(fā)，因此用戶在移動端觸屏設備的操作流程以及事件觸發(fā)如下：
- 手指點擊屏幕觸發(fā)touchstart事件
- 手指短暫停留房轿，如有小移動觸發(fā)touchmove事件
- 手指離開屏幕觸發(fā)touchend事件
- 等待300ms看用戶是否再次觸摸屏幕粤攒，若沒有在用戶手指離開的位置觸發(fā)click事件
總結： 擊穿的根源在第四步，touchstart事件綁定的監(jiān)聽函數(shù)已經讓浮層關閉囱持，300ms后在用戶手指離開位置觸發(fā)click事件將點擊不到浮層夯接，自然點擊到浮層后面的頁面元素，出現(xiàn)點擊擊穿的現(xiàn)象纷妆。
6.3 解決辦法
- 監(jiān)聽改用click事件替換touchstart事件關閉浮層盔几，就產生導致300ms延遲的判定
- 還是采用touchstart事件進行監(jiān)聽，在touchstar事件里阻止默認事件
Event.preventDefault(),阻止300ms后的click觸發(fā) - 異步處理延后浮層關閉事件掩幢，添加定時器setTimeout大于等于300ms逊拍。
7. 關于1px的實現(xiàn)
7.1 為什么要實現(xiàn)1px
在移動端頁面時上鞠，border: 1px solid red;，還是會覺得1px太寬不能完美還原設計稿顺献，所以需要實現(xiàn)比1px更細的邊框
7.2 實現(xiàn)方式
viewport縮放： viewport適配的方案旗国，適配的原理是整個頁面放大縮小枯怖，當然也包括邊線
-
設置0.5px
.item { border-bottom: .5px solid black; /*ios有效 部分android無效*/ } 偽元素 + transform：iOS/android都有效注整，缺點處理一條邊框還好，如果是4條邊框兩個偽元素不夠得新增標簽來實現(xiàn)
.item::after {
content: '';
display: block;
height: 1px;
transform: scaleY(0.5);
background: #black;
position: relative;
top: 13px;
}
-
線性漸變背景: 兼容性好
.item-4-border { margin: 10px 0; padding: 10px; background: linear-gradient(to bottom, #ccc .5px, transparent 0), linear-gradient(to left, #ccc .5px, transparent 0), linear-gradient(to right, #ccc .5px, transparent 0), linear-gradient(to top, #ccc .5px, transparent 0); }
