個人在移動端的一些總結歸納,有新的知識點會一直更新 一.css部分 1.meta標簽 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 移動端加上這個標簽才是真正的自適應,不加的 ...
個人在移動端的一些總結歸納,有新的知識點會一直更新
一.css部分
1.meta標簽
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
移動端加上這個標簽才是真正的自適應,不加的話,假如你把一個980px寬度(手機端常規是980)的PC網頁
放在手機上顯示,倒也能正常顯示不出現滾動條,不過是移動設備對頁面 做了縮小優化,所以字體等都相應縮小了
(980px是相對於手機像素的,我的是超過1000px多一些就出現滾動條了,這個沒具體研究)。
關於 initial-scale=1 ,這個參照iphone5的尺寸320*568,如果你頁面按照640*1136做的話,scale就設為0.5
<meta content="yes" name="apple-mobile-web-app-capable"> IOS中safari允許全屏瀏覽
<meta content="black" name="apple-mobile-web-app-status-bar-style"> IOS中Safari頂端狀態條樣式
<meta content="telephone=no" name="format-detection"> 忽略將數字變為電話號碼
<meta content="email=no" name="format-detection"> 忽略識別email
2.圖片尺寸
做全屏顯示的圖片時,一般為了相容大部分的手機,圖片尺寸一般設為640*960
(我是覺得這個尺寸好,也看不少的圖片也是這個尺寸,視情況而定)
3.去除webkit
的滾動條
element::-webkit-scrollbar{
display: none;
}
如果要去除全部的,就把`element`去掉
同時這個屬性可讓在`div`里的滾動如絲般順滑:`-webkit-overflow-scrolling : touch`;
4.去除button
在ios
上的預設樣式
-webkit-appearance: none;
border-radius: 0
5.placeholder
元素樣式的修改
input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}
6.不想讓按鈕touch
時有藍色的邊框或半透明灰色遮罩(根據系統而定)
-webkit-tap-highlight-color:rgba(0,0,0,0);
7.在移動端做動畫效果的話,如果通過改變絕對定位的top
,或者margin
的話做出來的效果很差,很不流暢,而使用css3
的transition
、transform
或者animation
的效果將會非常棒(這一方面IOS
比android
又要好不少)。
如果用**3d(translate3d)
來實現動畫,會開啟GPU
加速,動畫會更加流暢,但硬體配置差的安卓用起來會耗很多性能
8.使用圖片時,會發現圖片下總是有大概4px
的空白,(原因據說圖片是inline,觸發baseline什麼的。。。)常用解決方法有
img{display:block};
img{vertical-align:top}
也可取其他幾個值,視情況而定
其他解決辦法 見此
9.關於使用彈性盒子box
佈局
暫時有三種方案:
display:-webkit-box; // 早期的版本
display:-webkit-box-flex; // 過渡版本
display:-webkit-flex; // 最新的版本
我暫時使用的是 display:-webkit-box
;暫時只有這個的相容性最好,flex
是最好用,還可以如float
一樣排多個元素時自動換行,只是相容性還太差,(即使是第一種,在火狐下相容性也不是很好)
對於第一種常見用法是:
<ul class="box">
<li class="box_flex">1</li>
<li class="box_flex">2</li>
<li class="box_flex">3</li>
</ul>
.box {
display: -webkit-box;
-webkit-box-align: center; // 設置裡面的元素垂直居中
-webkit-box-pack: center; // 設置水平居中
}
.box .box_flex1 {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
display: block;
width: 0;
}
要想三個li
元素平分box
的寬度,width:0
是關鍵(在這個坑裡陷了好久,直到偶然的一次設置了width:0
突然就好了,後來在天貓上也看到了同樣的設置width:0
)
彈性佈局其他詳解可見此
10. 使用 a
標簽的話,儘量讓 a
標簽 block
,儘量讓用戶可點擊區域最大化
11. 對兩個div
使用了transform
之後,div
下的z-index
有時就會失效,我遇到過,但沒去認真探究,只是把z-index
提高就好了,如果遇到這個問題的,詳細可以 看這
12. 在iOS
中,當你點擊比如 input
準備輸入時,虛擬鍵盤彈出,整個視窗的 高度 就會變為 減去鍵盤 的高度,加入你在底部有fixed
的元素比如btn
,這個元素就會跑上來,一般都不會太美觀。我是當focus
時就把它設為absolute
,視情況而定,也有比如顯示一個新的層,將含有fixed
按鈕的那一層隱藏的情況等等。
另外一種情況(一般在頁面內容很少時iphone5
及以上常發生),當輸入框彈出時fixed
元素擠到輸入框上,當輸入框消失時,fixed
元素並沒有隨著輸入框的消失而回到底部,這是因為整個視窗的高度還保持在 減去鍵盤的 高度,需要手動去觸發讓視窗高度回到正常,然後試了很多方法都沒成功,後來的方案是輸入框消失時給頁面加隱形的很大的padding
比如1000px
併在30ms
後改為正常,具體可看這移動端IOS關於fixed元素的問題
13. 禁止用戶選中文字 -webkit-user-select:none
14. 當把input
設為 width:100%
時,有時可能會遇到input
的寬度超出了屏幕,這時可對input
加一個屬性 box-sizing:border-box
關於box-sizing:border-box
,此屬性是把邊框的寬度和padding
包含在盒子的高寬中,假如你設置兩個元素float
且各占50%
,又都有border
時,用這個屬性就可以完美地讓它們能顯示在同一行
15. 做一個方向箭頭比如 “>” 時,可以用一個正方形的div
,設置border:1px 1px 0 0
;然後rotate(45deg)
,這樣就省去了一個圖片
16. CSS
權重:style
是1000
,id
是100
,class
是10
,普通如li
、div
和偽類是1
,通用如*
是0
;
17. 使用rem
時,設某個div
比如的height:3rem;line-height:1.5rem;overflow:hidden;
時,在某些android
手機上可能會出現顯示不止兩行,第三行會顯示點頭部。 解決:利用js
獲取文字line-height
再去設置div
高度
18. 使用background
時,background-position
里使用了比如center left
後不能再加具體的數值去定位,比如center 10px left
(暫時相容性差)
19.使用rem
佈局時,由於webkit
支持的最小字體大小是12px
,所以使用html
使用62.5%
實際是12px
,這樣很難計算,我的做法是設置成625%
即100px
,然後1rem
就相當於100px
20.移動端字體使用 font-family: Helvetica,sans-serif
;我看這也是天貓使用的
21. 在iphone
原生鍵盤上用keyup
統計字元數時,系統不會自動監控你選擇文字的事件,比如打了多個拼音,可能選擇的實際文字比輸入的字元數多或者少,但無法在用戶確定自己的輸入時監控到keyup
(其他事件也一樣)判斷字元數。 改成input
事件就可以了
22.實現毛玻璃效果,透過背景看其他元素模糊,自身元素不模糊。
-webkit-backdrop-filter: saturate(180%) blur(20px);
background: rgba(0,0,0,0.5);
這個效果暫時只有IOS9
上的safari
可以。
用css3
的blur
效果的話,是整層元素全部模糊,而透過模糊層看其他的元素不模糊
23. 如果需要展示小於12px
的文字,用transform:scale(%)
;它將元素縮小,但本身應該占的空間並不會變小,所以比如要元素居左對齊的話,還需設置translateX
24. 在移動端對input
框使用disabled
屬性,會導致元素裡面value
值在頁面上被隱藏看不見,可以對元素使用css3
效果pointer-event:none
,意思就是此元素對滑鼠事件無效
二.js部分
-
如果使用
jquery
綁定touch
事件的話,獲取touchstart
,touchmove
的觸點坐標用e.originalEvent.targetTouches[0].pageX
,
獲取touchend
則用e.originalEvent.changedTouches[0].pageX
-
利用
style
獲取獲取transform
的rotate
值parseInt(/rotateX\((.*?)\)/.exec(getALL.style.webkitTransform)[1]) 如果頁面一開始沒有`style`值,`rotate`是寫在`CSS`里的,需要用到`getComputedStyle`,具體請看[這裡][5]
-
有些版本的
iphone4
中,audio
和video
預設播放事件不會觸發,比如使用window.onload
或計時器等都不能觸發播放,必須用JS
寫事件讓用戶手動點擊觸發才會開始播放,比如$(document).one('touchstart',function(){ audio.play(); })
-
想要在
touchmove:function(e,參數一)
加一個參數,結果直接使用e.preventDefault()
就會e
報錯,處理方法為touchmove:function(e,參數一){ var e=arguments[0] e.preventDefault() }
-
移動端的一些小頁面可能沒必要用到
zepto.js
這些工具庫,就可以使用一些新一點的api
,比如選取元素用querySelector(".class #id")
和querySelectorAll(".class element")
,操作class
可以用classList
-
點擊一個元素時,使用
touchstart
會立即觸發,而使用click
則用有大概0.3s
的延遲
想模擬一個立即觸發的點擊事件有兩種方法,fastclick.js
和zepto.js
里的tap
事件。
不過zepto
的tap
事件有一個事件穿透的問題。假如你tap
一個彈出層元素(這個元素遮罩了一個a
標簽),這個元素立即消失,這樣由於上述的0.3s
延遲tap
事件就會傳遞給a
標簽成click
事件造成a標簽跳轉。
以上面的例子來說,解決方案視情況而定:
① tap
時讓遮罩漸隱消失,這個過程超過400ms
就不會穿透到下一層去了
② 在touchend
事件回調中加入preventDefault
, 併在下一層中加上pointer-events:none
。(這個沒用過)
③ 有的時候比如彈出一個iphone
上滑動出來的層,點擊黑色半透明區域彈出層消失,這種可以在黑色區域綁定touchend
也是和tap
差不多的效果
-
當彈窗出現時,想禁止屏幕的滑動,給那個遮罩層添加
touchmove
事件即可,用e.preventDefault()
會阻止的scroll
,click
等事件,消失時再off
掉,$(".body_cover").on("touchmove", function(e) { e.preventDefault(); });
-
使用
input file
上傳文件時,可以指定接受的類型,accept="image/png,image/jpeg,image/gif"
,同時在android
上預設不能使用相機,可以加capture="camera"
同時,由於原生的樣式不好看,可以通過設置input的display:none,然後使用id.click()去觸發input元素的點擊。
9.給元素加:active偽類時,如果要求高,相容性好的話,就得用js監控touchstart然後加相應的class
$(document).on("touchstart", function(e) {
var target = $(e.target);
if (target.hasClass("is_hover")) {
target.addClass("hover_css");
}
});
三、微信部分
-
判斷是否來自微信瀏覽器
function isFromWeiXin() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return true; } return false; }
-
判斷手機的類型
var user=""; if (/android/i.test(navigator.userAgent)){ // android user="1"; } if (/ipad|iphone|mac/i.test(navigator.userAgent)){ // ios user="0"; }
3.如果在網頁里嵌套一個iframe
,src
為其他的網址等,當在微信瀏覽器打開時,如果iframe
里的頁面過大,則iframe
的src
不能載入(具體多大不知道,只是遇到過)。
4.微信jssdk
里預覽圖片介面,圖片的url
不能填base64
編碼,ios
上會很卡,估摸著微信得卡個5
秒左右才打得開,而android
上壓跟就卡住或者一直卡在讀取圖片界面
5.微信當在輸入框里輸入消息時,會提示警示框不要輸入qq密碼等,這個可以在公眾平臺的功能設置的業務功能變數名稱設置
6.微信里假如頁面一使用ajax
獲取數據,當你進入下一頁面再按返回鍵返回頁面一的時候,有些情況不會去請求ajax
數據,會使用緩存,然而ajax
來的數據又並沒有存在緩存里。要設置cache:false
(iphone、android的某些手機都可能出現)
7.在微信js config
的時候,如果URL
的參數有如?a={"param": "1"}
,會導致簽名失敗。給參數用encodeURIComponent
編碼後再傳過去也是失敗!研究了好久。(後臺代碼沒做任何修改,只在我前端修改代碼)。所以最後還是使用了?param=1
這樣的格式
轉自:https://segmentfault.com/a/1190000003908191