移動端web開發技巧 -- 轉載

時間 2019-11-11

標籤移動 web 開發技巧轉載欄目無線简体版

原文原文鏈接

META相關

1. 添加到主屏後的標題（IOS）
<meta name="apple-mobile-web-app-title" content="標題">

2. 啓用 WebApp 全屏模式（IOS）

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />

3. 百度禁止轉碼
經過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，很是之噁心。不過咱們能夠經過這個meta標籤來禁止它：
<meta http-equiv="Cache-Control" content="no-siteapp" />

4. 設置狀態欄的背景顏色（IOS）

設置狀態欄的背景顏色，只有在 "apple-mobile-web-app-capable" content="yes" 時生效

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

default ：狀態欄背景是白色。
black ：狀態欄背景是黑色。
black-translucent ：狀態欄背景是半透明。若是設置爲 default 或 black ,網頁內容從狀態欄底部開始。若是設置爲 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

5. 移動端手機號碼識別（IOS）

在 iOS Safari （其餘瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數字處理爲電話連接，好比：
7位數字，形如：1234567
帶括號及加號的數字，形如：(+86)123456789
雙鏈接線的數字，形如：00-00-00111
11位數字，形如：13800138000
可能還有其餘類型的數字也會被識別。咱們能夠經過以下的meta來關閉電話號碼的自動識別：
<meta name="format-detection" content="telephone=no" />

6.開啓短信功能：<a href="sms:123456">123456</a>

7. 移動端郵箱識別（Android）

與電話號碼的識別同樣，在安卓上會對符合郵箱格式的字符串進行識別，咱們能夠經過以下的meta來管別郵箱的自動識別：
<meta content="email=no" name="format-detection" />

一樣地，咱們也能夠經過標籤屬性來開啓長按郵箱地址彈出郵件發送的功能：
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

8. 優先使用最新版本 IE 和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
9.viewport模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>標題</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
這裏開始內容
</body>
</html>

三大手機系統的字體：
ios 系統
      默認中文字體是Heiti SC
      默認英文字體是Helvetica
      默認數字字體是HelveticaNeue
      無微軟雅黑字體

android 系統
      默認中文字體是Droidsansfallback
      默認英文和數字字體是Droid Sans
      無微軟雅黑字體

winphone 系統
默認中文字體是Dengxian(方正等線體)
默認英文和數字字體是Segoe
無微軟雅黑字體
各個手機系統有本身的默認字體，且都不支持微軟雅黑
如無特殊需求，手機端無需定義中文字體，使用系統默認
英文字體和數字字體可以使用 Helvetica ，三種系統都支持

二、移動端字體單位font-size選擇px仍是rem
對於只須要適配手機設備，使用px便可
對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備
rem配置參考：
html {font-size:10px}
@media screen and (min-width:480px) and (max-width:639px) {
html {
      font-size: 15px
}
}
@media screen and (min-width:640px) and (max-width:719px) {
html {
      font-size: 20px
}
}
@media screen and (min-width:720px) and (max-width:749px) {
html {
      font-size: 22.5px
}
}
@media screen and (min-width:750px) and (max-width:799px) {
html {
      font-size: 23.5px
}
}
@media screen and (min-width:800px) and (max-width:959px) {
html {
      font-size: 25px
}
}
@media screen and (min-width:960px) and (max-width:1079px) {
html {
      font-size: 30px
}
}
@media screen and (min-width:1080px) {
html {
      font-size: 32px
}
}

三、移動端touch事件(區分webkit 和 winphone)
當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件
如下支持webkit
touchstart——當手指觸碰屏幕時候發生。無論當前有多少隻手指
touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動
touchend——當手指離開屏幕時觸發
touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用
如下支持winphone 8
MSPointerDown——當手指觸碰屏幕時候發生。無論當前有多少隻手指
MSPointerMove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用css的html{-ms-touch-action: none;}能夠阻止默認狀況的發生：阻止頁面滾動
MSPointerUp——當手指離開屏幕時觸發

四、移動端click屏幕產生200-300 ms的延遲響應
移動設備上的web網頁是有300ms延遲的，玩玩會形成按鈕點擊延遲甚至是點擊失效。

解決延遲方案：
fastclick能夠解決在手機上點擊事件的300ms延遲
zepto的touch模塊，tap事件也是爲了解決在click的延遲問題
觸摸事件的響應順序
一、ontouchstart
二、ontouchmove
三、ontouchend
四、onclick
解決300ms延遲的問題，也能夠經過綁定ontouchstart事件，加快對事件的響應

在高清顯示屏中的位圖被放大，圖片會變得模糊，所以移動端的視覺稿一般會設計爲傳統PC的2倍
那麼，前端的應對方案是：
設計稿切出來的圖片長寬保證爲偶數，並使用backgroud-size把圖片縮小爲原來的1/2
其它元素的取值爲原來的1/2，例如視覺稿40px的字體，使用樣式的寫法爲20px

六、ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉
ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0，也就是屬性值的最後一位設置爲0就能夠去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)}

七、部分android系統中元素被點擊時產生的邊框怎麼去掉
android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0)
-webkit-user-modify:read-write-plaintext-only;
}
-webkit-user-modify有個反作用，就是輸入法再也不可以輸入多個字符
另外，有些機型去除不了，如小米2
對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤

八、winphone系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉
<meta name="msapplication-tap-highlight" content="no">

九、webkit表單元素的默認外觀怎麼重置
.css{-webkit-appearance:none;}

十、webkit表單輸入框placeholder的顏色值能改變麼
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

十一、webkit表單輸入框placeholder的文字能換行麼
ios能夠，android不行~

14. 禁止文本縮放
當移動設備橫豎屏切換時，文本的大小會從新計算，進行相應的縮放，當咱們不須要這種狀況時，能夠選擇禁止：
html {
　　       -webkit-text-size-adjust: 100%;
}
須要注意的是，PC端的該屬性已經被移除，該屬性在移動端要生效，必須設置 `meta viewport’。

15. 移動端如何清除輸入框內陰影
在iOS上，輸入框默認有內部陰影，但沒法使用 box-shadow 來清除，若是不須要陰影，能夠這樣關閉：
input,
textarea {
　　border: 0; /* 方法1 */
　　-webkit-appearance: none; /* 方法2 */
}

17. 移動端禁止選中內容
若是你不想用戶能夠選中頁面中的內容，那麼你能夠在css中禁掉：
.user-select-none {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;    /* Firefox all （移動端不須要） */
  -ms-user-select: none;    /* IE 10+ */
}

18. 移動端取消touch高亮效果
在作移動端頁面時，會發現全部a標籤在觸發點擊時或者全部設置了僞類 :active 的元素，默認都會在激活狀態時，顯示高亮框，若是不想要這個高亮，那麼你能夠經過css如下方法來進行全局的禁止：
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
但這個方法在三星的機子上無效，有一種妥協的方法是把頁面非真實跳轉連接的a標籤換成其它標籤，能夠解決這個問題。

21.屏幕旋轉的事件和樣式
事件
window.orientation，取值：正負90表示橫屏模式、0和180表現爲豎屏模式；
window.onorientationchange = function(){
         switch(window.orientation){
            case -90:
            case 90:
            alert("橫屏:" + window.orientation);
            case 0:
            case 180:
            alert("豎屏:" + window.orientation);
            break;
         }
}
樣式
//豎屏時使用的樣式
@media all and (orientation:portrait) {
.css{}
}

//橫屏時使用的樣式
@media all and (orientation:landscape) {
.css{}
}

22.audio元素和video元素在ios和andriod中沒法自動播放
應對方案：觸屏即播
$('html').one('touchstart',function(){
audio.play()
})

24.手機拍照和上傳圖片
<input type="file">的accept 屬性

<input type=file accept="image/*">

<input type=file accept="video/*">

ios 有拍照、錄像、選取本地圖片功能
部分android只有選取本地圖片功能
winphone不支持
input控件默認外觀醜陋

25. 消除transition閃屏
.css{
/*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
-webkit-transform-style: preserve-3d;
/*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/
-webkit-backface-visibility: hidden;
}

開啓硬件加速
解決頁面閃白
保證動畫流暢
  .css {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  }
設計高性能CSS3動畫的幾個要素
儘量地使用合成屬性transform和opacity來設計CSS3動畫，
不使用position的left和top來定位
利用translate3D開啓GPU加速

框架
1. 移動端基礎框架
zepto.js 語法與jquery幾乎同樣，會jquery基本會zepto~
iscroll.js 解決頁面不支持彈性滾動，不支持fixed引發的問題~ 實現下拉刷新，滑屏，縮放等功能~
underscore.js 該庫提供了一整套函數式編程的實用功能，可是沒有擴展任何JavaScript內置對象。
fastclick 加快移動端點擊響應時間
animate.css CSS3動畫效果庫
Normalize.css Normalize.css是一種現代的、CSS reset爲HTML5準備的優質替代方案
2. 滑屏框架
適合上下滑屏、左右滑屏等滑屏切換頁面的效果
slip.js
iSlider.js
fullpage.js
swiper
3.瀑布流框架
masonry
工具推薦
caniuse 各瀏覽器支持html5屬性查詢
paletton 調色搭配php