要開始實作手機網頁前,我們要先知道以下基本的知識:


手機網頁大量使用:硬體加速

什麼是硬件加速?
把一些計算量較大的圖像處理工作交給專門的硬件(GPU)來處理以減輕CPU工作量的技術。

舉例:不用程式編寫,因為耗CPU。因此用CSS3( -webkit-transform: translate3d(0,0,0) )編寫,是耗GPU。
參考:http://www.html5rocks.com/en/mobile/optimization-and-performance/



CSS3使用普及:

  • 用flexible box布局
  • rgba
  • 圓角、陰影
  • 新的selector (表單)
  • 漸層背景
  • media query
  • border image
  • 圖片
  • transition


檢查瀏覽器相容性:

因為css3的支援程度不ㄧ,因此我們要使用一些比較特殊的css3要養成檢查相容性的習慣。


視網膜螢幕 Retina Display

原理:


使用:

  1. 使用2倍圖片

    • 使用圖片– img { width: 50% }
    • 背景圖片background-size: 50%•
    • 只在Retina屏上使用2倍圖
    • 使用media query
    • 使用工具來實現
    • Retina Images 服務器端根據UA返回不同尺寸圖片
    • retinajs 用JS自動替換為@2x的圖片
  2. 使用CSS3代替圖片

    • 圓角、漸變和陰影可用CSS3實現
    • 圖標可以用SVG圖片或者web font
  3. 測試手機圖片解析度

問題:

1.載入完畢後自動隱藏網址列


window.addEventListener("load",function() {  
setTimeout(function(){
window.scrollTo(0, 1); }, 10);
});

(參考網站)

2.設定書籤到手機桌面中的APP圖示

<!-- 將下方的語法加到<head>~</head>之間。 -->
<link rel="apple-touch-icon" href="images/Icon.png"> <!-- 57×57px -->
<link rel="apple-touch-icon" sizes="72×72" href="images/Icon-72.png"> <!-- 72×72px ipad-->
<link rel="apple-touch-icon" sizes="114×114" href="images/Icon@2.png"> <!-- 114×114px iphone4-->



參考:
http://www.minwt.com/mobilewebdesign/8568.html
http://i.cynet.tw/%E6%89%8B%E6%A9%9F%E7%B6%B2%E9%A0%81%E6%95%99%E5%AD%B8-%E5%88%A4%E6%96%B7%E6%98%AF%E6%89%8B%E6%A9%9F%E4%B8%8A%E7%B6%B2%EF%BC%8C%E9%82%84%E6%98%AF%E9%9B%BB%E8%85%A6%E4%B8%8A%E7%B6%B2/
http://www.minwt.com/mobilewebdesign/5650.html
http://www.minwt.com/mobilewebdesign/5280.html
http://www.slideshare.net/webzhao/html5-14992711?qid=3247cbea-d471-4865-b9c9-992d42f05089&v=default&b=&from_search=5

關於作者

  • 羅拉拉 / 前端工程師
  • 我的理念是:不是只要好看,還要好用,不只要好用,還要好維護。
  • Blog
  • facebook

關於作者

  • Luki / 前端工程師
  • 冷靜思考,沉著應對。
  • Blog
  • facebook

關於作者

cythilya

  • Cythilya / 前端工程師
  • SEO & Social Media
  • Blog
  • Facebook
Author:Grace
Author:Ryan
Author:Winston
Author:Ader