九月 2017
« 六月    
 123
45678910
11121314151617
18192021222324
252627282930  

RWD 實作心得以及行動裝置、iOS 遇到的問題

螢幕快照 2013-08-15 下午01.48.53

 螢幕快照 2013-08-15 下午01.49.07

螢幕快照 2013-08-15 下午01.49.24
螢幕快照 2013-08-15 下午01.49.40

Responsive Web Design,RWD
讓網站隨著不同螢幕大小的裝置改變內容,方便使用及閱讀
不用再另外花時間製作手機版網頁,增加開發成本及維護困難

要做 RWD,要先知道 CSS 的 Media Query ,請參考:Mobile Web 前端技術筆記(二): Media Queries 與 CSS
看懂之後,接下來就是幫自己的網頁做不同大小的衣服,記得網頁大小的順序要由大到小

1
2
3
4
5
6
7
8
9
10
11
12
@media (max-width: 959px) {
    // 網頁大小 <= 960px 會載入這裡的 css
}
@media (max-width: 767px) {
    // 網頁大小 <= 768px 會載入這裡的 css
}
@media (max-device-width: 480px){
    // 網頁大小 <= 480px 會載入這裡的 css
}
@media (max-device-width: 320px){
    // 網頁大小 <= 320px 會載入這裡的 css
}

然後再幫 head 的部份加 viewport 的 meta

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

最後,只要存檔然後重新載入你的網頁,把視窗拉大縮小就可以看到成果了 ~
比較麻煩的地方,就是要看網頁的排版,然後自訂香對應的版型
要是瀏覽器沒辦法縮小到 320px,可以用 Chrome 的開發工具改變網頁大小
iPhone、Android手機模擬器 (Google Chrome內建)
( Mac 上的 Chrome 怎麼改變大小,最小只能縮到 400px,真的很怪…. )

———–

其他:

跨瀏覽器問題

避免因為瀏覽器不同,寫出來的東西會有破地的問題,可以用 reset.css 先歸零,讓所有瀏覽器開啟來都相同
在寫 CSS 時,建議可以試試看 SCSS ,在編寫時閱讀性看起來好看,階層關係比較清楚
以下是範例,雖然量少感覺不出來,但是 CSS 數量一多真的看起來很痛苦阿阿阿…
而且 SCSS 還支援計算、函數等等的東西,更方便開發 ~

1
2
3
4
5
6
7
8
9
10
11
// SCSS
.warp{
 .warp2{
  background: #AAA;
 }
}
 
// 轉出來的 CSS
.warp .warp2 { 
 background: #AAA;
}

動畫效果

之前做網頁遇到需要到動畫效果,都是靠 jQuery animate 函數完成
在電腦上看起來雖然流暢,但到效能有限的手機、行動裝置上,就是悲劇了
雖然手機現在都在推雙核四核八核,顯示晶片多好多快
但一定還是有人會拿三、四年的手機 ( 就像我… ),那時候哪有這種東西?

螢幕快照 2013-08-15 下午03.16.51
就用 Animate.css 吧!

?View Code JAVASCRIPT
1
2
// jQuery 寫法
$(selector).addClass("animated 動畫名稱");

實測結果,比用 jQuery animate 硬幹效果比起來真的順很多

 

用 iPhone、iPod、iPad 看網頁,點按鈕、連結都會 Lag

iOS 在點選網頁可以按的東西( 不管是 div 還是 button,只要是可以按的、有綁 click 事件的 )
都會延遲個 300ms 然後閃一下,才執行動作 ( 手機可以到 這裡 測試,電腦沒用 )
雖然看起來時間很短,但對於程式的流暢性真的真的真的差很多
iOS  會這樣設計,很像是為了偵測使用者動作…應該啦,也找不到相關資料
Apple Developer 文件要有錢才看的到…乾

解決辦法有兩個,第一個就是把 click 事件改成 touchstart,但是好麻煩…
第二個就是用 fastclick.js 這套是我用起來感覺最無腦簡單好用的,為什麼說無腦的簡單?
因為只要一行就搞定整個專案了,雖然跟其他的套件比起來會有些 bug

?View Code HJAVASCRIPT
1
$(document).ready(function(){ FastClick.attach(document.body); });

後來看到了 Mozilla 的說明

現在已有許多常見技術可利用偵測功能,進而最佳化觸控功能。偵測觸控最常見使用範例,就是提高觸控介面的反應度。
在使用觸控式螢幕介面時,瀏覽器會在「觸碰的動作 (如點選鏈結或按鈕)」與「時間內實際發生的點選事件」之間,自行產生約 300 ms 內的人工延遲。
另特別一提,若是支援 Touch Events 的瀏覽器,則會在「touchend」與「瀏覽器模擬的滑鼠事件」之間產生延遲,以相容於 mouse-centric 指令碼:

touchstart > [touchmove]+ > touchend > delay > mousemove > mousedown > mouseup > click

另外,在 行動網頁效能提升秘笈 這篇裡面也有寫到其他提高 iOS 瀏覽速度的小撇步,可以參考看看

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>