News
新聞資訊
網站首頁 >> 新聞資訊 >> 軟件資訊

移動端前端開發與PC端比有哪些不同?

文章來源:六方科技 已瀏覽:2548
2016-11-11
1、語義化,結構化
從以切圖為導向到以語義化為導向的頁面生產,使得頁面的結構和層次更加清晰。語義化的頁面通常也是結構化的,結構化的頁面更利于移動端做多分辨率適配與多瀏覽器兼容。

由于移動設備屏幕實際顯示像素(物理像素 / 設備像素比 = 實際顯示像素)遠小于PC屏幕,導致移動Web通常在一屏之內沒辦法展示出需要的內容,這就會存在更多DOM顯示/隱藏的交互,結構化的頁面能更好的管理和操作DOM。

移動Web還需要適配不同分辨率,分辨率的變化(比如:橫豎屏切換)也可能會導致頁面DOM顯示/隱藏的交互。無論是上面說的JS操作DOM還是CSS3的Media Queries,語義化的、結構化的頁面都是更加的選擇。

2、移動設備特性
移動設備特性通常分為兩類:影響視覺的和影響觸覺的,很多具體的HTML5和CSS3技術就是為了適應移動設備特性的解決方案,包括:touch event、geolocation、orientation等。

影響視覺包括:
  • 屏幕分辨率
  • 設備像素比
視覺部分會直接影響設計稿和產出的圖片,也就是上面 @簡單 答案里面提到的二倍圖、三倍圖。

影響觸覺包括:
  • 觸摸屏(用手指操作)
  • 傳感器(陀螺儀、GPS等)
  • 軟鍵盤
觸覺部分會影響到人機交互輸入接口,像 @簡單 答案里面提到的Touch手勢、滑動等都屬于輸入,還有其他的語音識別、GPS、方位感應等,對應的HTML5、CSS3技術實現可以查閱W3C的相關文檔。

3、瀏覽器(WebView)兼容
不要用理論解釋移動瀏覽器的兼容BUG,
不要用理論解釋移動瀏覽器的兼容BUG,
不要用理論解釋移動瀏覽器的兼容BUG,

重要的事情說三遍,有好多BUG根本就是瀏覽器的實現缺陷導致,很多問題是無法繞過的,遇到這樣的問題只能盡量改進技術實現,但通常都沒有完美的技術解決方案,除非更改需求交互和設計,對于一些不是很嚴重的問題,我都會無視。

在一開始設計產品需求和細節時,就應當把一些技術性的問題考慮進來,盡量避免在測試階段或上線之后才發現,這通常需要很多的經驗積累才能做到,需要耐心慢慢來。

4、移動端調試
95%的調試可以在Chrome DevTools 移動設備模擬器下完成,剩下的5%才需要特殊的調試技巧。

5、關于測試

上面說的是開發調試,而非測試。測試是由專門的QA部門完成,目前移動端測試還沒有比較先進的測試手段(也許有我不知道而已,這塊需要多交流),基本都是靠人工。

  濟寧網站制作濟寧軟件開發濟寧網站建設濟寧網絡推廣濟寧網絡優化濟寧網站設計首選六方科技

最新資訊
點擊立刻咨詢
南昌麻将埋地雷打法