移動端」宴席知多少

時間 2019-11-10

標籤移動宴席多少欄目無線简体版

原文原文鏈接

轉載(http://adt.aicai.com/index.php/archives/179/)javascript

瞎折騰移動端的項目已經很長一段時間了，並不像其它企業同樣，能夠有項目組去完成，基本都是一我的瞎嘗試，時而web，時而web app。恍恍惚惚過了這段歲月，也不曉得本身忙了啥。總叫別人去總結，讓別人學會總結，也該爲本身總結總結了。也爲了團隊之間更好的知識共享吧。如何開發移動端就跟如何上菜同樣，上菜有規則，先冷後熱，先菜後點，先鹹後甜，先炒後燒等等。按照必定的程序來才能恰到好處地掌握。那麼，如今仍是上菜吧，客官等久了... ...php

前菜（涼菜，冷盤）

1、移動端開發與PC端開發不一樣
你們都知曉，手機種類千千萬，也致使移動端開發面對的屏幕尺寸是各類頭疼。
Web：固定佈局和彈性佈局
Web app：響應式佈局css

2、調試工具
firefox的響應式設計視圖:Firefox 瀏覽器內置了自定義設計視圖的功能，能夠經過 Firefox->Web 開發者->自定義設計視圖（或者摁下 Shift + Ctrl + m ）。相比網絡工具，運行更加流暢，無需聯網。html

Chrome開發，chrome瀏覽器也有個Emulation，如圖：前端

另外，就是設備上的調試，方法不少。html5

1. 直接把作好的靜態頁面放到手機用瀏覽器打開查閱
2. 在本地搭建環境，好比php環境，局域網訪問ip查閱頁面（有搭建過博客的都知道）
3. 遠程調試java

A:Android 設備 Chrome 遠程調試
B:uc瀏覽器開發者調試android

開胃湯

那麼，問題來了，移動端開發到底該如何下手？
1．關於viewportios

a)概念：設備的pixels和css的pixels（整體而言，你只須要關注CSS的pixels，這些pixels指定你的樣式被如何渲染。
）
b)概念：視窗 viewport（viewport的功能在於控制你網站的最高塊狀（block）容器：<html>元素。）

下面是link的一些用法，可是移動端也好web端也好，爲了減小HTTP請求數，我的建議最好能使用媒體查詢來解決的能夠儘量的用媒體查詢。css3

媒體查詢以下：

頭菜

做爲頭菜，通常宴會來講，頭菜是表明性的菜點。那麼說到移動端呢？

移動端的reset

時過境遷，Reset 逐漸淡出的前沿前端的視野，normalize.css 取而代之。normalize.css，統同樣式的同時保留可辨識性；reset 統同樣式，徹底沒有可讀性，破壞原有標籤的語義化。針對每一個項目的不一樣，各自能夠基於Normalize.css，根據目前咱們你們的使用習慣進行了一些清零及移動端的特色添加一些基礎樣式。

在這裏會提到一個rem,想當初應該不少人也討論研究過px，pt，em等單位吧。rem是CSS3新引進來的一個度量單位，舉個例子：「em」是相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能須要知道他父元素的大小，在咱們屢次使用時，就會帶來沒法預知的錯誤風險。而rem是相對於根元素<html>，這樣就意味着，咱們只須要在根元素肯定一個參考值。

瀏覽器的基準字號設置爲 62.5%，也就是 10px，如今 1rem = 10px —— 爲了計算方便。而後在body 上應用了 font-size: 1.6rem;，將頁面字號設置爲 16px。
html {font-size: 62.5%;} body {font-size: 1.6rem; /* =16px */}

能夠用如下的代碼片斷保證在低端瀏覽器下也不會出問題

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px /

移動端的html5+css3

css3代替DOM animation,使用setTimeout定時器, 定時修改DOM元素的style屬性。
css3使用設備GPU渲染，動用硬件設備自己的計算能力來作一些展現，效率上要比DOM animation要高不少。

@keyframes
animation-name（動畫名稱）
animation-duration（動畫持續時間）
animation-delay（延遲執行時間）
animation-timing-function（動畫形變函數指定）
animation-play-state（播放狀態指定）
animation-iteration-count（無限循環）

至於HTML5，你們目前用的最多的也就僅僅是那幾個標籤而已，想詳細瞭解的自便吧。好比：

<input type="text" placeholder="規定幫助用戶填寫輸入字段的提示">
<input type="number">
<input type="date">
<input type="range">
<input type="color">
<input type="email">
<input type="search">

移動端的javascript

先說這一類的框架吧：
JQuery mobile，Sencha Touch等都是很龐大的UI框架。
Zepto.js：框架小，類jQuery，沒有多餘的其餘模塊，適合團隊本身擴展。（不支持WP）
沒有一個很好的團隊去折騰的話，仍是建議使用jqm，由於你到後面仍是會改爲jqm搭配Hammer.js來搭建

提及移動端的javascript，使用手勢操做代替鼠標輸入/出事件。開發者大多數會使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。那就先來看看PC端的一些事件：(mousedown, mouseup, click)

移動端的手勢事件：
touchstart //當手指接觸屏幕時觸發
touchmove //當已經接觸屏幕的手指開始移動後觸發
touchend //當手指離開屏幕時觸發
touchcancel //當在滑動手機的過程當中忽然出現一個系統事件，好比電話。這會就cancel掉。（基本不多用）

爲什麼要用touch事件代替click事件？
- click事件300ms延時
- touch事件支持多點觸摸
- 手勢操做

移動端的css3的自定義字體（@font-face），前一篇文章有作介紹。這裏就不詳細述說。

主菜

有人會問，圖片該怎麼切，拿到的psd文件尺寸是多少，按照何種尺寸去製做？仍是無從下手。那麼，移動端頁面那麼小，作頁面的時候按照何種安全可視尺寸來呢？

alert('width:' + window.innerWidth + ';height:' + window.innerHeight);

目前我知道的移動端可視區尺寸

iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隱藏URL與狀態欄)
iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隱藏URL與狀態欄)
Note2 360 * 567 (未隱藏URL與狀態欄)
iPad 3/4 768*928 (未隱藏URL與狀態欄)
GALAXY SIII 360 * 567 (未隱藏URL與狀態欄)
小米2A 360 *567 (未隱藏URL與狀態欄)
HTC G10 320 * 460
酷派大神 400615/400568(未隱藏URL與狀態欄)

設計稿按照640的尺寸去切（有的人按照480的去切，主要是考慮圖片資源的浪費），而後頁面能夠看成是320的來寫，也就是說，字體大小以及圖片大小，在頁面製做的時候都須要除以2。

爲何要按照640的來切，卻用320的來製做呢？由於設備分辨率太多，圖片切大的去壓縮，在高分辨率的設備，圖片就不會變得很小了。
其實結果可知，手機端頁面，由於上面viewport設置了，通常瀏覽器都是320，360，400這類寬度製做頁面。

一、meta，link都有了
二、css reset也有了
三、儘量的使用Flexbox 佈局，儘可能放棄float
四、圖片的切法和媒體查詢
五、移動端js的事件使用
六、最後手機測試完美收工
（簡單粗糙上檔次吧？）

甜品（飯後閒談消化）

這裏我必須說的是局部刷新，定位問題吧。
position:sticky與position:fixed佈局，由於存在太多兼容bug，因而都會利用iscroll來解決這個問題。
如何使用，請移步iscroll官網查閱，這裏不做詳細說明。由於這裏每個點均可以來了說一篇或者好幾篇文章。

盒子邊框溢出
當咱們指定了一個塊級元素時，而且爲其定義了邊框，設置了其寬度爲100％。按照盒子模型，就會發現該元素的左右邊框各1個像素會溢了，致使出現橫向滾動條，這時候咱們能夠爲其添加-webkit-box-sizing:border-box用來指定該盒子的大小包括邊框的寬度。

ios數字顏色樣式超過9位後失控
這個問題我不知道該怎麼描述，就是在ios中，當數字超過9位數時，瀏覽器會給這個數字默認加上一個顏色，不管你設置什麼顏色都無效。

css3關於background-size縮放背景圖像的使用;如何用flex和translate等分，居中。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。