移動前端開發總結

阿新 • • 發佈：2019-01-18

基本概念

Native ：本地應用，使用Java/Objective-C/Swift開發

Web App：網頁應用HTML5開發

Hybrid App：混合應用（native,web)

Web App 不需要安裝，開發成本低，維護簡單，跨平臺效能優
但體驗感較差；

Native 需要安裝，開發成本高，維護更新複雜，跨平臺效能較差，但體驗感很好！

Hybrid App 介於兩則之間。需要安裝，開發成本居中，維護簡單，跨平臺效能良好。

視覺

在移動瀏覽器中使用viewport源標籤控制佈局

一個典型的針對移動端優化的站點包含類似下面的內容：

meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"

width屬性控制視口的寬度。可以像width=600這樣設為確切的畫素數，或者設為device-width這一特殊值來指代比例為100%時螢幕寬度的CSS畫素數值。

initial-scale ：初始縮放比例

maximum-scale、minimum-scale ：允許使用者縮放的最大、最小比例

user-scalable：使用者是否可以手動縮放。

橫屏/豎屏

window.addEventListener('orientationchange',function(){

//rerender something
});

console.log(window.orientation)//0 90 180 -90順時針角度

style media = "all and (orientation:portrait)" type = "text/css"
/*豎屏
/style

style media = "all and (orientation:portrait)" type = "text/css"
/*橫屏
/style

Flex伸縮佈局

.parent{
display:-webkit-flex;
display:flex;
}


.initial{
-webkit-flex:initial;
        flex:initial;
width:200px;
min-width:100px;
//空間足夠是，寬度為200px,空間不足時為100px，不會更窄
}

.none{
-webkit-flex:none;
        flex:none;
width:200px;
//無論視窗如何變化，寬度一直是200px
}

.flex1{
-webkit-flex:1;
        flex:1;
//佔滿剩餘寬度的1/3
}
.flex2{
-webkit-flex:2;
        flex:2;
//佔滿剩餘寬度的2/3
}

軟鍵盤

開啟數字鍵盤：
input type = “tel”

隱藏位址列：

setTimeout(funciton（）{window.scrollTo(0,1);},0);

APPLE-TOUCH-ICON

在iPhone,iPad,iTouch的safari上可以使用新增到主屏按鈕將網站新增到主螢幕上
link rel=”apple-touch-icon” href=”apple-touch-icon-iphone.png”
link rel=”apple-touch-icon” sizes=”72x72” href=”apple-touch-icon-ipad.png”
link rel=”apple-touch-icon” sizes=”114x114” href=”apple-touch-icon-iphone4.png”

互動

Tap

click 有300ms左右延遲，
tap可解決click的延遲，還可以防止穿透（跨頁面穿透除外）

scroll（未經驗證）

手勢

tap:長按或選擇一個控制或選項

double tap:之間快速雙擊頁面

drag:指尖在頁面上滾動或滑動

flick：指尖快速滑動頁面

CSS3

合理使用漸變、圓角、陰影（別太多，低端機hold不住）
代替js動畫：效能好，相容性好， why not?
translate3d：開啟GPU硬體加速，提升動畫渲染效能

LocalStorage

.tpl data js img

每個域的最大長度為5MB

避免

iframe:卡cry,viewport失效，ios寬高失效，fixed定位錯誤

fixed+input

除錯

掃瀏覽器二維碼碼除錯

Mobile Web 適配總結

適配使頁面在不同尺寸的手機裝置上，頁面保持統一效果的等比縮放（看起來差不多）。

固定高度，寬度自適應

meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"

以較小寬度（如320px)的視覺稿作為參照進行佈局，垂直高度、間距使用px,em定值，水平混合使用定值和百分比或者利用彈性。

優點：實現簡單，相容性較好。

缺點：320px 過於窄小，不利於頁面的設計；只能設計橫向拉伸的元素佈局，存在很多侷限性。

後兩個適配 js 需儘可能早進入，減少（避免）viewport 變化引起的重繪。

固定寬度，viewport縮放

精準還原視覺稿

利用Rem佈局

依照某特定寬度設定 rem 值（即 html 的 font-size），頁面任何需要彈性適配的元素，尺寸均換算為 rem 進行佈局；

移動端開發和Web前端開發的區別是什麼

普通PC端開發和移動端開發的區別

相較而言，移動端需要相容的東西少了。

PC端開發，IE6-11,firefox,chrome,safari相容性

mobile的網頁開發，只需考慮webkit核心的瀏覽器和chrome，uv,qq,小米手機瀏覽器

移動端的網頁開發比PC端網頁開發更簡單一些。頁面笑了，CSS、html少了，互動簡單一些，滑動，觸屏，手勢

移動開發規範

tips:

iOS中如何禁止使用者儲存或複製圖片

為一個img標籤指定-webkit-touch-callout為none也會禁止裝置彈出列表按鈕，這樣使用者就無法儲存＼複製你的圖片了。

iOS中如何禁止使用者選中文字

我們通過指定文字標籤的-webkit-user-select屬性為none便可以禁止iOS使用者選中文字。

iOS中如何獲取滾動條的值

桌面瀏覽器中想要獲取滾動條的值是通過document.scrollTop和document.scrollLeft得到的，但在iOS中你會發現這兩個屬性是未定義的，為什麼呢？因為在iOS中沒有滾動條的概念，在Android中通過這兩個屬性可以正常獲取到滾動條的值，那麼在iOS中我們該如何獲取滾動條的值呢？

通過window.scrollY和window.scrollX我們可以得到當前視窗的y軸和x軸滾動條的值。

如何解決盒子邊框溢位

當你指定了一個塊級元素時，並且為其定義了邊框，設定了其寬度為100％。在移動裝置開發過程中我們通常會對文字框定義為寬度100％，將其定義為塊級元素以實現全屏自適應的樣式，但此時你會發現，該元素的邊框(左右)各1個畫素會溢了文件，導致出現橫向滾動條，為解決這一問題，我們可以為其新增一個特殊的樣式-webkit-box-sizing:border-box;用來指定該盒子的大小包括邊框的寬度。

附：移動端Web app開發

移動端Web app在頁面頭部加入下面這句話：

meta name="apple-mobile-web-app-capable" content="yes"

這個meta的作用是讓普通網頁被新增到主屏幕後，擁有一些類native的功能，如隱藏ios的上下狀態列，實現全屏，禁止彈性拖拽，修改頂部顏色等。

另外，手機淘寶、手機美團、手機微博的網頁版，大家開啟的時候，不是全屏的，但是用起來，開發者把他們偽裝得很想這種web app的互動體驗而已。(下滑後上狀態列被隱藏)

綜上，可以總結為web app

對js和css的選擇

主流移動端框架有jq mobile ,zepto, backbone ,angular

如zepto中有幾個很有用的事件，swipe,swipeLeft,right,up,down和tap

做了許多相容處理，稍顯多餘，統計資料顯示目前只需要考慮webkit和幾個特定國產瀏覽器。