⑴ 前端開發時遇到過什麼坑尤其是webapp開發時
過去，應用開發需要注重大量的專業知識，程序員只需關注單一的語言（比如COBOL、RPG、C++等），並利用該語言創建應用。Web不再是單單關注獨立的一面。相反，一個現代化的Web應用開發者應該是「樣樣精通」。他們不僅要理解開發方面還要明白Web應用安全漏洞問題，了解如何與其他設備集成在一起等等。往深了說，他們還需要了解這些應用程序是如何運行在平板電腦和智能手機上的。
換句話說，Web應用開發正變得更加復雜化。它迫切需要一個不斷增加以及不斷發展的配套技能。
掌握六大技能後，估計Web應用開發時候就會避免一些坑。
1. 安全
過去，企業在內部安裝應用，基於防火牆背後的應用無法與第三方服務或應用進行通信。而隨著軟體的發展，現代Web應用能夠與其他設備進行集成，並存儲在雲伺服器上或者訪問多種類型設備。因此，安全問題顯得尤為重要。
「作為一名應用開發者（web/desktop），深入理解應用程序的安全性是最為重要的技能之一。」Veracode首席安全顧問Stephen Jensen說道，「在當今世界，有關安全問題的新聞不絕於耳，大多數是揭露數以百萬計的人們的敏感信息。因此，Web應用開發者必須知道如何預防常見的漏洞，比如Cross-Site Scripting (XSS)，SQL注入等。為了確保應用在創建過程中免受安全問題的惡意攻擊，同時也為了保護用戶潛在的敏感信息問題，這也是所有開發者應當學習的必備基礎技能。」
2. 用戶體驗（UX）設計
「隨著移動設備用戶需求量的不斷增加，開發者需要充分理解用戶體驗設計顯得愈發重要。」Raster Media CEO Michael Smith說，「設計團隊單獨負責某款應用的用戶體驗的日子已經一去不復返了。開發者必須考慮互動、動畫、速度以及各個APP之間的通信等問題。」
我完全贊同這一觀點。用戶體驗設計有幾大重要因素，首先，用戶的期望有所上升。用戶下載一款新的應用，他們想立即知道它是如何運行的。他們希望從業務應用中獲取相同的體驗。其次，用戶有選擇的餘地。如果不喜歡這款應用，他們會尋找另一款代替。由於用戶的期望值增加以及競爭的加劇，更為直觀的界面需求比以往顯得更加重要。
3. 自適應/響應式設計
談及UX設計，Web App開發者必須建立可隨處運行的應用程序。現在的問題不再是「用戶如何與我的應用進行交互？」而是演變成「用戶與我的應用如何在每款設備類型上進行交互？」
想要做到這一點並不容易。你必須回答以下這些問題：「智能手機上的按鈕設置在哪裡？你如何在小屏幕上格式化數據表？當設備從人像模式切換至風景模式會發生什麼？」總之，Web開發者必須知道讓Web應用適應不同屏幕大小的方法。
針對跨平台/設備，響應式設計和自適應設計主要兩大方法：
響應式設計使用流體網格以及CSS3媒體查詢來適應各種屏幕大小/類型上的應用。你可以通過Web找到各種響應式設計案例。例如TheNextWeb就是個典型的案例。你會發現，當你調整瀏覽器大小時，該網站會自動適應新的尺寸。
自適應設計根據不同的設備提供不同的HTML頁面。比如，一款獨立的Web應用可能需要3個獨立的表示層（HTML）：一個是PC端，一個是平板電腦，另一個則是智能手機。例如，在不同的設備上訪問Web App，外觀和行為顯示的均各不相同。
那麼哪一種方法最好呢？我想說它們有各有各的優勢。響應式方法對於Web網頁設計以及Web應用信息來說是個不錯的選擇；而自適應方法可更好的適用於數據驅動Web應用，尤其是包含那些數據表的應用。為什麼？這是因為它讓開發者能夠更好的控制數據結構和樣式，而不是試圖去適應多種屏幕尺寸上的單個表格，自適應設計方法可讓你為每款設備創建不同的表單。
4. JavaScript
開發者總會為他們選擇的編程語言而爭論。你無法說服一個Java程序員稱贊PHP是最好的，反之亦如此，就像你也無法說服一個PHP程序員贊同Java是最好的，但在Web應用中開發者大多數會選擇使用JavaScript。
「隨著移動和Web桌面應用的發展，JavaScript已快速成為最為重要的計算機語言。」 Coordinato創始人Ben Bakhshi表示，「不少業內人士認為利用JavaScript編碼將在未來10年內顯著增加。」
5. Web應用架構
在Web開發上，應用架構變得比以往更加重要。應用體系架構直接影響到應用可擴展性、靈活性，以及集成其他Web服務和應用的能力。如果開發者想要創建一款有用的、可持續性的應用，那麼理應深刻掌握Web應用架構知識。
「Web應用開發者應該充分關注Web應用架構」，MRC軟體開發經理Tyler Wassell說，「開發者應該了解，所開發的應用程序如何與所有系統組件進行交互，以及底層架構將如何影響諸如可移植性、可維護性、可用性等性能情況。」
6. API集成
現如今，API已發展成為Web開發一個重要的方面。從本質來講，API讓不同的Web服務之間相互通信。開發者可以通過其他應用/服務上調用數據創建應用。
SimpleCollegeRecipes網站創始人兼CEO Brendan O』Connor認為，「API集成已成為現在Web應用開發者必備的技能。API允許你從其他網站上整合內容和信息。可以說，API使人人受益，包括終端用戶，API供應商以及程序員自己。」
總結：
Web應用開發正在不斷演變，Web開發所具備的技能也在不斷更新變化中。開發者唯有不斷進取、學習新的知識才能在開發行業中站住腳。當然，想要掌握每一種Web（移動Web）技能，幾乎是不可能的，大部分公司無法為員工給予Web以及移動開發方面不同的解決方案，不可能做到面面俱到。
⑵ ios端對webapp注入javascript時需要注意哪些細節
. 必須要適配所有的智能手機設備
移動設備的屏幕是各式各樣的，對設計影響較大的主要是屏幕解析度、尺寸、屏幕方向這些因素。現在的iOS設備有320×480，640×960，1136×640，1024×768，2048×1536這些解析度，3.5寸、4寸、7.9寸、9.7寸這些尺寸等，未來還有更大的尺寸。
所以，需要解決Web app在不同屏幕下的界面適配問題。
最佳解決辦法有2個：
1、在寫前端頁面的時候，css 採用100%布局
2、採用html5技術來布局開發。
1.1 適配不同解析度
通過響應式網頁的設計方法提升頁面在不同解析度下的兼容性：
由於手機屏幕尺寸下，一般來說只能一個模塊一個模塊地從上到下排列。此時設計者就需要考慮模塊擺放的優先順序了。一般來說，用戶重點關注的、最近更新、與用戶相關的信息應該放在前面。
另外最好以主流解析度480×800進行設計，對略高於和略低於該解析度的屏幕可將界面元素進行縮放，對間距、邊距進行適當調整。
所以，在設定容器、圖片、文本框的寬度時最好避免使用px單位，使用%可使頁面在不同解析度屏幕下保持布局和頁面結構不發生改變。
1.2 平板電腦
使用CSS3的媒體查詢(media query)語句可獲得瀏覽器的高寬和設備的像素比，並可根據開發者的需要對不同的設備應用不同的樣式表。所以開發者可以控制一個頁面在不同設備上的表現。
由於手機屏幕和平板電腦的屏幕尺寸和像素都相去甚遠，所以為了充分利用平板電腦的大屏優勢，以獲得良好的用戶體驗，最好在兩種設備上使用不同的界面布局。相信iOS用戶都有這樣的感覺：有的App只適配iPhone，在iPad上運行則無法布滿屏幕，只能點「2X」按鈕顯示一個粗糙的界面。還有一種App可同時兼容iPhone和iPad，在手機和平板的屏幕上都能完美顯示，用戶也無需單獨下載兩個版本。很明顯，後者使用起來更方便，更美觀。
Mobile Web App使用媒體查詢功能即可實現這種功能。那麼在平板電腦上，有哪些需要注意的設計點呢?
因為平板電腦多在橫屏下使用，所以使用分欄視圖可在一個界面內顯示兩個層級的內容，方便用戶快速切換item。
首頁多以宮格視圖、Tab為主，微博、QQ這種以內容為主的界面將分欄視圖作為默認首頁也是可以的。在手機上最常使用的list在平板上就不是很常用了，整個屏幕顯示list，不僅浪費空間，也沒有分欄視圖的操作高效。
需要注意的是，IE9以下的瀏覽器不支持media query.
1.3 橫豎屏切換
由於目前還不能在webkit內核里禁止設備方向的旋轉，所以如果用戶的設備開啟了屏幕方向根據重力自動旋轉，那麼運行於瀏覽器的Web App也是會跟著旋轉的。
如果能夠捕捉到設備的方向，可以對橫豎屏分別進行布局設計，但最好能保證界面風格和樣式不會有大的變化。
反例就是iPhone的音樂App，在豎屏下會顯示歌曲list，但是切換到橫屏下顯示專輯封面。兩種界面風格跳動太大會導致部分用戶不適應，以為是兩個不同的頁面。計算器App也只有在橫屏下才顯示科學計算模式，豎屏下用戶根本無法切換到該模式，連引導也沒有。
宮格視圖是橫豎屏切換最平滑的布局，看看iOS系統的主屏幕就知道了。一個個應用程序圖標在橫豎屏切換時，幾乎只是圖標旋轉了一下方向。
還有一點就是切換到橫屏時，可自動進入全屏模式以顯示更多的內容。否則標題欄和底部欄將會佔去很多空間
2.WebAPP的交互動效
受瀏覽器性能影響，很多Native App能實現的華麗動畫在Web App項目里的表現並不是很好。所以應該果斷去掉非必要的動效以保證Web App能夠運行流暢。
因為很多動效會對用戶起到很好的引導作用，如果沒有這些動畫，可能會導致用戶對界面邏輯關系的理解產生混亂。這就對動效的設計提出了較高的要求。
總結了一下Web App的幾點動效設計原則：
●盡量不使用不必要的動效。
●優先使用簡單的動畫。如平移、縮放。盡量避免使用3D動畫。
●避免刷新頁面。因為整個頁面白屏，瀏覽器走進度條的體驗會給用戶瀏覽網頁的感覺，而不是在使用app
●框架元素優先顯示。只在內容載入區域顯示loading動畫
●避免跳變。在不影響性能的情況下，可盡量用縮放和平移動畫，保證用戶視覺焦點的延續性和理解的延續性。
●同類界面/對象，同層級界面/對象的動效保持一致。可幫助用戶理解產品架構和導航邏輯。
●高層級界面的動效對應高級物理位置。如果左右平移的動畫是用來切換上下一層級，那麼首頁應該是在最左邊，如iOS。如果前後切換的動畫是用來切換上下一層及，那麼首頁應該是在最上面，如Windows Phone。
3.WebAPP的內容布局和APP的風格要保持一致
講導航和信息內容布局的文章眾多，Mobile Web App既然要實現Native App的操作體驗，照傳統的移動客戶端的設計模式去設計即可。只需要記住你設計的Web App需要運行在iOS, Android, Windows Phone等多個平台，多種設備上即可。
由於iOS相比其他平台，沒有back按鍵，所以在iOS上運行需要保證界面內的導航能夠實現閉環。所以Android上有些操作可以通過Menu鍵喚出，但是在iOS上就需要直接暴露出來。
下圖左側是Zaker的Android版，右側是iPhone版。Android版的菜單欄需要點擊Menu鍵才出現。
4.善於使用Native App的UI相關控制項
使用Native App的UI控制項，可以讓Mobile Web App更有Native App的操作體驗。常見的如Badge，Back button，Bubble，Picker，Indicator，Title bar，Dialog，Toast，Loading，Drap down to refresh，Notification等。下圖分別是Facebook的Native App和Web App，由於後者使用了客戶端常見的一些UI控制項，所以用戶很難從視覺上識別出後者是Web App.
避免使用傳統的Web UI控制項，如麵包屑、文字鏈：
另外，在控制項尺寸上也應該像Native App那樣提供盡量大點擊區域的控制項。參照經驗和各平台的官方人機界面指南，可以知道適合用戶手指點擊的尺寸應該在7-9mm之間，不能小於7mm。相鄰點擊控制項的行距不應小於2mm。
5. WebAPP後期需要針對瀏覽器進行優化
為了兼顧瀏覽器的性能和交互，需要注意以下幾點：
●頁面使用盡量少的DOM元素;
0
posted @ 2015-04-08 18:16 小強好吃 閱讀(16) 評論(0) 編輯 收藏
⑶ 設計出來的webAPP頁面 與 前端實現尺寸怎麼算,
等比例縮放，設計時就按照iPhone比例來
⑷ webapp設計稿720怎麼切
目前我做設計稿的設計尺寸，IPhone6的尺寸，向下可以適配4，5，向上可以適配6 plus；我記得IP6推出後，我問總監應該用什麼尺寸設計，他說用IP6的吧，好適配，切出來就是@2x了，改一改上下都能照顧到。
推薦做設計稿的時候使用IPhone6的尺寸進行設計。
IP 6的尺寸相比於IP 5來說，很多系統控制項尺寸並未變化，只是高度也就是內容顯示區域發生了變化。下面是IPhone 6的空白文檔，我建立了參考線。
文檔建立之初就設置好參考線是個很好的工作習慣，我希望更多的設計師可以養成更好的工作習慣。
上下的參考線很容易設置，因為是根據IPhone自身系統設置的，左右的參考線我習慣設置為24px，也就是顯示內容距離邊框的距離。這不是絕對
的，我和總監研究過，究竟是設置為左右30px還是24px比較好，通過對國內國外各種APP的對比，覺得24px更適合一些，不寬不窄，這個完全是設計
師個人的設計習慣，所以不要當成什麼規范，確切的說，整個屏幕你都可以隨便做，但是我們這里說的是正常頁面。
⑸ html5做手機app和做手機網頁一樣嗎
不一樣，需增加自適應標簽來保持一樣。
代碼如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
解釋：Viewport指用戶網頁的可視區域，content中的「width」指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴展，頁面不可縮放。
(5)webapp設計尺寸擴展閱讀：
HTML5的事件屬性和異常處理
事件屬性
HTML 5 元素可擁有事件屬性，這些屬性在瀏覽器中觸發行為，比如當用戶單擊一個HTML 5元素時啟動一段 JavaScript。下面列出的事件屬性，可以把它們插入 HTML 標簽來定義事件行為。
HTML 5 中的新事件屬性：
onabort， onbeforeunload， oncontextmenu， ondrag， ondragend， ondragenter， ondragleave， ondragover， ondragstart， ondrop， onerror， onmessage， onmousewheel， onresize， onscroll， onunload。
⑹ 如何保證ios webapp啟動圖清晰
iOS中的safri瀏覽器可以將一個網頁添加到桌面，當做一個獨立的應用運行。
當然，這里我們不討論怎麼去做一個webApp，這需要html5的相關知識和開發經驗。
這里我們只講webApp添加桌面後到啟動的相關細節。
全屏顯示：
<meta name="apple-mobile-web-app-capable" content="yes" />
系統頂欄的顏色(黑色和白色)：
<meta name="apple-mobile-app-status-bar-style" content="white" /><meta name="apple-mobile-app-status-bar-style" content="black" />
桌面程圖標(如果不設置，則圖標會顯示網頁的截圖)：
<link rel="apple-touch-icon" href="icon.png" />
但是，iOS會自作多情的給這個圖標加上高光，如果想圖標不被高光，可以這樣：
<link rel="apple-touch-icon-precomposed" href="icon.png" />
如果想給不同的設備匹配不同的icon，可以加上size屬性：
<link rel="apple-touch-icon" size="72x72" href="icon-ipad.png" /><link rel="apple-touch-icon" size="114x114" href="icon-iphone4.png" />
程序啟動的過程中，需要指定啟動畫面，否則，白屏或者截圖是讓人很不愉悅的。
iOS有ipad和iPhone/ipod touch之分。
ipad的啟動畫面是橫豎屏分開的，畫面的尺寸必須是1024*768、768*1024。
iPhone和ipod touch雖然都是豎屏的，但是卻有Retina屏幕和非Retina屏幕之分；另外它們啟動畫面的尺寸並不是屏幕的大小，而是(屏幕寬度)*(屏幕高度-20)。也就是說，非Retina的尺寸為320*460，Retina屏幕的尺寸為640*920。
引入啟動畫面是支持媒體查詢的。
因此，可以通過media query給ipad的橫豎屏引入不同的圖：
<link rel="apple-touch-start-image" href="landScape.png" madia="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape)" /><link rel="apple-touch-start-image" href="portait.png" madia="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portait)" />
但是媒體查詢卻搞不定Retina屏幕，所以通過js來hack：
給普通的解析度引入320*460的圖片：
<link rel="apple-touch-start-image" href="start.png"media="screen and (max-device-weidth:320px)" />Retina屏幕js:if((app.device.type === "iPhone" || app.device.type === "iPod") && app.device.version >= '5' && window.devicePixelRatio >= 2){$('head').append($('<link rel="apple-touch-startup-image" href="start-640-920.png" />'));
}
⑺ 移動webapp前端ui用哪個框架好
WeUI
WeUI是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信 Web 開發量身設計，可以令用戶的使用感知更加統一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。
Frozen UI
Frozen UI是騰訊社交用戶體驗設計 － 增值UI開發團隊一個開源的簡單易用，輕量快捷的移動端UI框架。基於手Q樣式規范，選取最常用的組件，
做成手Q公用離線包減少請求，升級方式友好，文檔完善，目前全面應用在騰訊手Q增值業務中。
FrozenUI提供的CSS組件是目前QQ會員前端開發組所用的通用樣式庫。遵循手Q樣式規范，基本樣式使用離線包的方式減少請求，並提供快速接入的方案。
FrozenUI提供的一系列JavaScript插件，更優雅地在移動端上呈現更靈動的動畫效果。
FrozenJS 是針對移動端開發的 js 組件庫，其依賴 zepto.js 和 FronzenUI。
FrozenJS 的所有組件均以 zepto 的插件的形式存在。
阿里開源的SUI Mobile
SUI Mobile
SUI Mobile 是一套基於 Framework7 開發的UI庫。並參考 Ratchet、Fastclick 開源庫。它非常輕量、精美，只需要引入我們的CDN文件就可以使用，並且能兼容到 iOS 6.0+ 和 Android 4.0+，非常適合開發跨平台Web App。
輕量的UI庫 SUI Mobile 非常輕量，核心庫壓縮Gzip後的JS、CSS網路傳輸體積總共只有52K，卻提供了20+個常用的組件。
對於只有HTML&CSS的組件，你只需要復制HTML代碼既可以使用。他的大部分JS組件都是獨立的 Zepto 插件，並且提供了Zepto/jQuery 風格的API，你將會非常熟悉這種方式。
開發團隊：阿里巴巴共享業務事業部UED團隊
網路系
GMU
GMU是基於zepto的mobile UI組件庫，提供webapp、pad端簡單易用的UI組件!
Jingle
Jingle是一個SPA(Single Page Application)開發框架，用來開發移動端的html5應用，在體驗上盡量去靠近native應用，希望有一天html5能夠做到與native一樣的操作體驗。
豐富的UI組件提供了按鈕、列表、表單、彈出框、輪換、上拉/下拉、日歷等各種移動端常用的組件，簡單適用，
前後端分離支持前端模板渲染，模板按需自動載入，完善的事件機制。
輕量級基於Zepto開發，依賴了iscrol
purecss
purecss採用其Grid的部分即可，需要定製的部分，建議自行配置，或者是直接採用grid.css，grid960.css這樣的柵格來處理。Purecss小的沒有節操，全部模塊gzip壓縮後才 4.4KB* 。 考慮到移動端，保持文件盡量小對我們來說非常重要，每一行CSS都經過深思。如果你只用部分模塊，簡直小的忽略。
Pure基石,Pure基於Normalize.css添加了HTML元素的布局和樣式，以及常用的UI組件。全是精華，木有糟粕。
移動端是初衷,Pure是響應式的盒子模型，適應所有尺寸的屏幕。通過皮膚生成器可以自定義樣式。
寫出你自己的樣式,Pure提供最基礎的樣式，鼓勵你基於此寫出自己的樣式。它被設計為容易覆寫，且不影響你自己的樣式。
ionic
基於angular2，豐富的UI組件，大大改進的編程模型，非常適合快速開發。
jquery mobile
jQuery Mobile 是創建移動 web 應用程序的框架。
jQuery Mobile 適用於所有流行的智能手機和平板電腦。
jQuery Mobile 使用 HTML5 和 CSS3 通過盡可能少的腳本對頁面進行布局。
Bootstrap
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式布局、移動設備優先的 WEB 項目。
wex5
國產的ui，支持打包。
前端UI：完全恪守html5+css3+js，干凈純潔設備api：採用業界主流Phonegap/Cordova
向導、模板：簡單定義，即可輕松製作向導和模板
主題、樣式：海量bootstrap資源引入和定製
UI組件：純H5+CSS3，輕松引入第三方UI組件
插件：輕松對接即時通訊、推送、支付等各類插件
後端：輕松調用後端組件和api，並實現可視化
⑻ Web App 和 Native App，哪個是趨勢
webapp是趨勢，因為webapp的「性工能」障礙已經解決，現在nativescript,reactnative,native.js都給js提供了API，讓你可以用JS調用HTML5的增強功能及手機OS的API，說白了，現在的JS已走出瀏覽器，做以前只有原生可以做的事了，原生的優勢已盪然無存，而webapp的優勢突顯出來，什麼跨平台啊，跨設備，跨尺寸，即時更新，流量入口等等，這些全是webapp的優勢。附帶說一下Javascript，這門早期的蹩腳語言，未來有一統江湖的趨勢，以前js只局限在瀏覽器內使用，node.js把js帶到了伺服器端開發，nw.js把js帶到了桌面端開發，espruino,tessel把js帶到了嵌入式和物聯網開發，reactnative把js帶到了移動端開發，而web前端更是有jquery,bootstrap等一大堆優秀js框架供使用………………總之，js熱火朝天，有可以進行全棧開發的趨勢，有一統江湖的趨勢。然而，此時天上卻出現一朵烏雲：webassembly，大佬門總是不希望世界安穩，因為你們安穩了他們就無利可圖，所以總是不停的制定各種分裂、碎片化、不兼容、新產品…………，讓大家疲於奔命疲於學習跟進，八大金剛在山頂笑…………
⑼ web UI 和移動UI的區別以及聯系
一、用戶與界面交互/操作的方式不同
Web網站：以滑鼠或觸摸板為媒介，多採用左鍵點擊的操作，也支持滑鼠滑過、滑鼠右鍵的操作方式。
移動App：直接用手指觸控屏幕，除了最通用的點擊操作之外，還支持滑動、捏合等各種復雜的手勢。
設計要點：
1、相比滑鼠，手指觸摸范圍更大，較難精確控制點擊位置，對此iOS人機交互規范中提到手指最合適的觸控區域至少需要44 point。所以移動App的點擊區域要設置的更大一些，不同點擊元素的間隔也不能太近。
2、Web網站支持滑鼠滑過的效果，一些tips提示通常採用滑鼠滑過展開/收起的交互方式。在移動App則不支持這類效果，通暢需要點擊特定的icon來收起/展開提示。
3、移動App支持的豐富的手勢操作，比如通過左滑可看到你可能需要的快捷操作「取消關注」、「刪除」，這類操作方式的特點是快捷高效，但對於初學者來說有一定的學習、獲知成本。我們在合理設計這些快捷操作方式的同時，還需要支持最通用的點擊方式來完成任務的操作路徑。針對手勢操作學習成本高的問題，一些App常通過新手引導的方式來教用戶。
4、移動App以單手操作為主，界面上重要元素需要在用戶單手點擊范圍內，或者提供快捷的手勢操作。
二、設備尺寸不同
Web網站：不同PC的解析度不同，瀏覽器窗口最大化的尺寸也不同；瀏覽器窗口可縮放。
移動App：設備尺寸相對較小；不同設備的解析度差異化較多，特別是Android；支持橫屏、豎屏調轉方向。
設計要點：
1、移動App的尺寸較小，一屏展示的內容有限，更需要明確哪些信息更為重要，有效的「組織」相關聯的內容，優先順序高的內容突出展示、次要內容適當「隱藏」。
2、Web網站因瀏覽器解析度差異較大、且窗口尺寸可變化，設計時需要確定好不同解析度的內容展示和布局，也因為這一點加上webapp的瀏覽需求，近幾年來響應式設計更為普遍。
3、因設備解析度、dpi大小不一，所以移動App在界面布局、圖片、文字的顯示上，要兼顧不同設備的效果，需要設計師與開發共同配合做好適配工作。
4、因移動設備支持橫屏、豎屏展示，所以在設計移動App（比如游戲、視頻播放界面）時，需要考慮用戶是否有「換個方向看看」的需求、哪些情況下切換屏幕方向、如何切換等。
三、使用環境不同
Web網站：通常坐在某個室內、使用時間相對較長；
移動App：既可能是長時間在室內使用、也可能是利用碎片化的時間使用，或站或坐或躺著或行走，姿勢不一；
設計要點：
1、使用Web網站時，用戶更為專注；
2、使用移動App時，用戶很容易被周邊環境所影響，對界面上展示的內容可能沒那麼容易留意到；長時間使用時更適合沉寂式瀏覽，碎片化時間使用時用戶可能沒有足夠的時間、每次瀏覽內容有限，類似「稍候閱讀」、「收藏」等功能則比較實用；用戶在移動過程中更容易誤操作，需要考慮如何防止誤操作、如何從錯誤中恢復。
四、網路環境不同
Web網站：網路相對穩定且基本無需擔心流量問題
移動App：因用戶使用環境復雜，可能在移動過程中從通暢環境到封閉的信號較差的環境，網路可能從有到無、從快到慢；既可使用無需擔心流量的WiFi，也可能使用需要控制流量的3G/4G。
設計要點：
1、移動App，網路異常的情況更普遍，需要更加重視這類場景下的錯誤提示、以及如何從錯誤中恢復的方法。
2、移動App，在3G/4G情況下用戶對流量比較重視，對於需要耗費較多流量的操作，需要提醒用戶，在用戶允許的前提下才繼續進行。
五、通知方式不同
Web網站：對於瀏覽器的通知中心，用戶使用的不多，很難主動喚起用戶
移動App：推送通知給用戶的方式很常見。
設計要點：
1、在移動App可以用通知及時提醒用戶一些重要信息，但也需要考慮用戶關閉通知提醒的場景下用戶仍然能無礙的使用；因為「通知」功能對用戶較為重要，設計師需要思考如何讓用戶更容易「開啟通知許可權」。
六、基於位置服務的精細度不同
Web網站：定位功能一般獲取到的是當前城市
移動App：可較為精確的獲取用戶的當前位置
設計要點：
1、移動App可合理的利用用戶的位置，給用戶提供一些服務。比如，地圖類可以搜索「我的位置」到目的地的路線，生活服務類可以查詢我的位置附近的美食、商場、電影院等等，這樣的方式省去了用戶手動輸入當前位置的復雜、更加智能化。
⑽ webapp 怎麼樣使頁面變小
1、開發成本非常大。一般使用的開發語言為JAVA、C++、Objective-C。2、更新體驗較差、同時也比較麻煩每一次發布新的版本，都需要做版本打包，且需要用戶手動更新（有些應用程序即使不需要用戶手動更新，但是也需要有一個惡心的提示）。3、非常酷因為native app可以調用IOS中的UI控制項以UI方法，它可以實現WebApp無法實現的一些非常酷的交互效果4、Native app是被Apple認可的Native app可以被Apple認可為一款可信任的獨立軟體，可以放在Apple Stroe出售，但是Web app卻不行。
Web App：1、開發成本較低使用web開發技術就可以輕松的完成web app的開發2、升級較簡單升級不需要通知用戶，在服務端更新文件即可，用戶完全沒有感覺3、維護比較輕松和一般的web一樣，維護比較簡單，它其實就是一個站點Webapp說白了就是一個針對Iphone、Android優化後的web站點，它使用的技術無非就是HTML或HTML5、CSS3、JavaScript，服務端技術JAVA、PHP、ASP。當然，因為這些高端智能手機（Iphone、Android）的內置瀏覽器都是基於webkit內核的，所以在開發WEBAPP時，多數都是使用 HTML5和CSS3技術做UI布局。當使用HTML5和CSS3l做UI時，若還是遵循著一般web開發中使用HTML4和CSS2那樣的開發方式的 話，這也就失去了WEBAPP的本質意義了，且有些效果也無法實現的，所以在此又回到了我們的主題–webapp的布局方式和技術。
在此所說的移動平台前端開發是指針對高端智能手機（如Iphone、Android）做站點適配也就是WebApp，並非是針對普通手機開發 Wap 2.0，所以在閱讀本篇文章以前，你需要對webkit內核的瀏覽器有一定的了解，你需要對HTML5和CSS3有一定的了解。如果你已經對此有 所了解，那現在就開始往下閱讀吧……1、首先我們來看看webkit內核中的一些私有的meta標簽，這些meta標簽在開發webapp時起到非常重要的作用1 <meta content=」width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;」 name=」viewport」 />2 <meta content=」yes」 name=」apple-mobile-web-app-capable」 />3 <meta content=」black」 name=」apple-mobile-web-app-status-bar-style」 />4 <meta content=」telephone=no」 name=」format-detection」 />第一個meta標簽表示：強制讓文檔的寬度與設備的寬度保持1:1，並且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；第二個meta標簽是iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；第三個meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式；第四個meta標簽表示：告訴設備忽略將頁面中的數字識別為電話號碼2、HTML5標簽的使用在開始編寫webapp時，哥建議前端工程師使用HTML5，而放棄HTML4，因為HTML5可以實現一些HTML4中無法實現的豐富的WEB應用程序 的體驗，可以減少開發者很多的工作量，當然了你決定使用HTML5前，一定要對此非常熟悉，要知道HTML5的新標簽的作用。比如定義一塊內容或文章區域 可使用section標簽，定義導航條或選項卡可以直接使用nav標簽等等。3、放棄CSS float屬性在項目開發過程中可以會遇到內容排列排列顯示的布局(見下圖)，假如你遇見這樣的視覺稿，哥建議你放棄float，可以直接使用display:block;4、利用CSS3邊框背景屬性這個按鈕有圓角效果，有內發光效果還有高光效果，這樣的按鈕使用CSS3寫是無法寫出來的，當然圓角可以使用CSS3來寫，但高光和內發光卻無法使用 CSS3編寫，這個時候你不妨使用-webkit-border-image來定義這個按鈕的樣式。-webkit-border-image就個很復雜 的樣式屬性。5、塊級化a標簽請保證將每條數據都放在一個a標簽中，為何這樣做？因為在觸控手機上，為提升用戶體驗，盡可能的保證用戶的可點擊區域較大。6、自適應布局模式在編寫CSS時，我不建議前端工程師把容器（不管是外層容器還是內層）的寬度定死。為達到適配各種手持設備，我建議前端工程師使用自適應布局模式（支付寶 採用了自適應布局模式），因為這樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、 chrome都能夠正常的顯示，你無需再次考慮設備的解析度。7、學會使用webkit-box上一節，我們說過自適應布局模式，有些同學可能會問：如何在移動設備上做到完全自適應呢？很感謝webkit為display屬性提供了一個webkit-box的值，它可以幫助前端工程師做到盒子模型靈活控制。8、如何去除Android平台中對郵箱地址的識別看過iOS webapp API的同學都知道iOS提供了一個meta標簽:用於禁用iOS對頁面中電話號碼的自動識別。在iOS中是不自動識別郵件地 址的，但在Android平台，它會自動檢測郵件地址，當用戶touch到這個郵件地址時，Android會彈出一個框提示用戶發送郵件，如果你不想 Android自動識別頁面中的郵件地址，你不妨加上這樣一句meta標簽在head中 1 <meta content=」email=no」 name=」format-detection」 />9、如何去除iOS和Android中的輸入URL的控制項條你的老闆或者PD或者交互設計師可能會要求你：能否讓我們的webapp更加像nativeapp，我不想讓用戶看見那個輸入url的控制項條？答案是可以做到的。我們可以利用一句簡單的javascript代碼來實現這個效果1 setTimeout(scrollTo,0,0,0);請注意，這句代碼必須放在window.onload里才能夠正常的工作，而且你的當前文檔的內容高度必須是高於窗口的高度時，這句代碼才能有效的執行。10、如何禁止用戶旋轉設備我曾經也想禁止用戶旋轉設備，也想實現像某些客戶端那樣：只能在肖像模式或景觀模式下才能正常運行。但現在我可以很負責任的告訴你：別想了!在移動版的webkit中做不到！至少Apple webapp API已經說到了：我們為了讓用戶在safari中正常的瀏覽網頁，我們必須保證用戶的設備處於任何一個方位 時，safari都能夠正常的顯示網頁內容（也就是自適應），所以我們禁止開發者阻止瀏覽器的orientationchange事件，看來蘋果公司的出 發點是正確的，蘋果確實不是一般的蘋果。iOS已經禁止開發者阻止orientationchange事件，那Android呢？對不起，我沒有找到任何資料說Android禁止開發者阻止瀏覽器orientationchange事件，但是在Android平台，確實也是阻止不了的。11、如何檢測用戶是通過主屏啟動你的webapp看過Apple webapp API的同學都知道iOS為safari提供了一個將當前頁面添加主屏的功能，按下 iphoneipodipod touch底部工具中的小加號，或者ipad頂部左側的小加號，就可以將當前的頁面添加到設備的主屏，在設備的主屏會自動 增加一個當前頁面的啟動圖標，點擊該啟動圖標就可以快速、便捷的啟動你的webapp。從主屏啟動的webapp和瀏覽器訪問你的webapp最大的區別 是它清除了瀏覽器上方和下方的工具條，這樣你的webapp就更加像是nativeapp了，還有一個區別是window對像中的navigator子對 象的一個standalone屬性。iOS中瀏覽器直接訪問站點時，navigator.standalone為false,從主屏啟動webapp 時，navigator.standalone為true， 我們可以通過navigator.standalone這個屬性獲知用戶當前是否是從主屏訪 問我們的webapp的。在Android中從來沒有添加到主屏這回事！12、如何關閉iOS中鍵盤自動大寫我們知道在iOS中，當虛擬鍵盤彈出時，默認情況下鍵盤是開啟首字母大寫的功能的，根據某些業務場景，可能我們需要關閉這個功能，移動版本webkit為 input元素提供了autocapitalize屬性，通過指定autocapitalize=」off」來關閉鍵盤默認首字母大寫。13、iOS中如何徹底禁止用戶在新窗口打開頁面有時我們可能需要禁止用戶在新窗口打開頁面，我們可以使用a標簽的target=」_self「來指定用戶在新窗口打開，或者target屬性保持空，但 是你會發現iOS的用戶在這個鏈接的上方長按3秒鍾後，iOS會彈出一個列表按鈕，用戶通過這些按鈕仍然可以在新窗口打開頁面，這樣的話，開發者指定的 target屬性就失效了，但是可以通過指定當前元素的-webkit-touch-callout樣式屬性為none來禁止iOS彈出這些按鈕。這個技 巧僅適用iOS對於Android平台則無效。14、iOS中如何禁止用戶保存圖片＼復制圖片我們在第13條技巧中提到元素的-webkit-touch-callout屬性，同樣為一個img標簽指定-webkit-touch-callout為none也會禁止設備彈出列表按鈕，這樣用戶就無法保存＼復制你的圖片了。15、iOS中如何禁止用戶選中文字我們通過指定文字標簽的-webkit-user-select屬性為none便可以禁止iOS用戶選中文字。16、iOS中如何獲取滾動條的值桌面瀏覽器中想要獲取滾動條的值是通過document.scrollTop和document.scrollLeft得到的，但在iOS中你會發現這兩 個屬性是未定義的，為什麼呢？因為在iOS中沒有滾動條的概念，在Android中通過這兩個屬性可以正常獲取到滾動條的值，那麼在iOS中我們該如何獲 取滾動條的值呢？通過window.scrollY和window.scrollX我們可以得到當前窗口的y軸和x軸滾動條的值。17、如何解決盒子邊框溢出當你指定了一個塊級元素時，並且為其定義了邊框，設置了其寬度為100％。在移動設備開發過程中我們通常會對文本框定義為寬度100％，將其定義為塊級元 素以實現全屏自適應的樣式，但此時你會發現，該元素的邊框(左右)各1個像素會溢了文檔，導致出現橫向滾動條，為解決這一問題，我們可以為其添加一個特殊 的樣式-webkit-box-sizing:border-box;用來指定該盒子的大小包括邊框的寬度。18、如何解決Android 2.0以下平台中圓角的問題如果大家夠細心的話，在做wap站點開發時，大家應該會發現android 2.0以下的平台中問題特別的多，比如說邊框圓角這個問題吧。在對一個元素定義圓角時，為完全兼容android 2.0以下的平台，我們必須要按照以下技巧來定義邊框圓角：1＼-webkit這個前綴必須要加上（在iOS中，你可以不加，但android中一定要加）；2＼如果對針對邊框做樣式定義，比如border:1px solid #000;那麼-webkit-border-radius這屬性必須要出現在border屬性後。3＼假如我們有這樣的視覺元素，左上角和右上角是圓角時，我們必須要先定義全局的(4個角的圓角值)-webkit-border- radius:5px;然後再依次的覆蓋左下角和右下角，-webkit-border-bottom-left-radius:0;-webkit- border-bottom-right-border:0;否則在android 2.0以下的平台中將全部顯示直角，還有記住！-webkit這個前 綴一定要加上！19、如何解決android平台中頁面無法自適應雖然你的html和css都是完全自適應的，但有一天如果你發現你的頁面在android中顯示的並不是自適應的時候，首先請你確認你的head標簽中是否包含以下meta標簽：1 <meta name=」viewport」 content=」width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;」 />如果有的話，那請你再仔細的看清楚有沒有這個屬性的值width=device-width，如果沒有請立即加上吧！20、如何解決iOS 4.3版本中safari對頁面中5位數字的自動識別和自動添加樣式新的iOS系統也就是4.3版本，升級後對safari造成了一個bug：即使你添加了如下的meta標簽，safari仍然會對頁面中的5位連續的數字進行自動識別，並且將其重新渲染樣式，也就是說你的css對該標簽是無效的。1 <meta name=」format-detection」 content=」telphone=no」 />我們可以用一個比較齷齪的辦法來解決。比如說支付寶wap站點中顯示金額的標簽，我們都做了如下改寫：1 <button class=」t-balance」style=」background:none;padding:0;border:0;」>95009.00</button>元