頁面分類闽颇。
pc端頁面 app端h5頁面 m站頁面
- PC用戶：使用pc端頁面锻拘，跟平時(shí)開發(fā)無異
- pad app用戶：app內(nèi)嵌頁面米母，使用pc端頁面轮锥，調(diào)用app組件矫钓，native方法；使用pc頁面時(shí)需要滿足適配要求舍杜。
- pad 瀏覽器用戶：pc端頁面新娜，但無法使用app組件，native方法
- mobile app用戶：使用apph5頁面既绩，調(diào)用app組件和native方法
- mobile 瀏覽器用戶：使用 m站頁面.
移動(dòng)端需要考慮的點(diǎn)
前提：使用百分比實(shí)現(xiàn)概龄，間距使用px單位
- 移動(dòng)端需要適配不同機(jī)型，在不同的寬高尺寸中可能需要不同的調(diào)整饲握，比如一個(gè)滿屏背景需求(由于內(nèi)容固定私杜，在iphone5以上的尺寸比較大的機(jī)型中可以使用，但在iphone4中由于高度不夠內(nèi)容溢出滿屏并不適用)救欧，今天看同事代碼 發(fā)現(xiàn)可以用min-height:100%來處理這個(gè)問題衰粹，既能在大尺寸的手機(jī)里滿屏，也能在小尺寸的手機(jī)里包住容器笆怠，比直接height：100%好用多了Ｂ脸堋！Ｆ锝Ｌ锲！
- 在得到設(shè)計(jì)圖后先了解層次關(guān)系箍铭，再模擬想好再不同設(shè)備的適配關(guān)系泊柬，然后在進(jìn)行下手編碼，不然在后期實(shí)體機(jī)測試的時(shí)候可能會出現(xiàn)很多不必要的麻煩诈火。
- 移動(dòng)設(shè)備最大寬度為640px兽赁，在pc上為了更好顯示移動(dòng)頁面時(shí)可以做個(gè)媒體查詢限制下寬度状答，雖然頁面不會投在pc端，但是可以在平時(shí)開發(fā)時(shí)候好看點(diǎn)
- 在移動(dòng)端時(shí)需要考慮retina屏問題刀崖，一個(gè)無線開發(fā)的同學(xué)告訴我惊科，現(xiàn)在基本沒有dpr為1的也少為3的，所以他在平時(shí)在發(fā)的時(shí)候直接使用2x圖片亮钦。當(dāng)然現(xiàn)在有個(gè)比較好用的css屬性直接設(shè)置不同的屏不的圖馆截，image-set，當(dāng)然還可以用媒體查詢以及js判斷
- 移動(dòng)端都是用touch事件來替代mouse事件蜂莉，pc端的組件跟移動(dòng)端的組件是分開的蜡娶，移動(dòng)端的組件更多是native結(jié)合，比如跳轉(zhuǎn)的功能(pc端可以使用cookie攜帶用戶登錄的信息映穗，移動(dòng)端可能需要另外的方式去實(shí)現(xiàn))
- 能用lazyload的地方一定用lazyload窖张，這是提升頁面性能很好的方法，icon之類的可以用雪碧圖蚁滋，某些固定的小圖片可以用base64內(nèi)嵌在css里可以減少請求（當(dāng)然尺寸可能會變大）
- 本次需求中有分享到facebook ok vk等社交網(wǎng)站的功能宿接，由于碰到很多坑，所以以后開發(fā)時(shí)需要注意：不同社交網(wǎng)站圖片尺寸問題辕录，facebook敏感圖片過濾問題睦霎，圖片地址暫時(shí)無法訪問問題，以及如何提供頁面供facebook抓取問題
- 適時(shí)適當(dāng)?shù)氖褂妙A(yù)加載踏拜、動(dòng)畫等效果來改善體驗(yàn)的同時(shí)來優(yōu)化頁面下載效率
