天天看點

《jQuery Mobile快速入門》—— 1.5 響應式設計

.本節書摘來異步社群《jquery mobile快速入門》一書中的第1章,第1.5節,作者:【美】brad broulik,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

jquery mobile快速入門

jquery mobile ui可以根據不同的顯示尺寸來呈現。例如,同一個ui會恰如其分地顯示在手機(見圖1-9)或更大的裝置上,比如平闆電腦、桌上型電腦或電視(見圖1-10)。

《jQuery Mobile快速入門》—— 1.5 響應式設計

有沒有可能建構一個可用于所有消費者(手機、桌上型電腦和平闆電腦)的應用程式呢?是的,這完全有可能。web提供了一個通用的分發方式。jquery mobile提供了跨浏覽器的支援。例如,在較小的裝置上我們可以使用帶有簡要内容的小圖檔,而在較大的裝置上我們則可以使用帶有詳細内容的較大圖檔。如今,具有移動呈現功能(mobile presence)的大多數系統通常都支援桌面式web和移動站點。在任何時候,隻要你必須支援一個應用程式的多個分發版本,就會造成浪費。系統根據自己的需要“支援”移動呈現,以避免浪費的速率,會促成“一次建構、随處運作”的神話得以實作。

響應式表單

在某些情況下,jquery mobile可以為使用者建立響應式設計。下面将講解jquery mobile的響應式設計如何良好地應用于豎屏(portrait)模式和橫屏(landscape)模式中的表單字段。例如,在豎屏視圖中(見圖1-11),标簽位于表單字段的上面。而當将裝置橫屏放置時(見圖1-12),表單字段和标簽并排顯示。這種響應式設計可以基于裝置可用的螢幕真實狀态提供最合用的體驗。jquery mobile為使用者提供了很多這樣優秀的ux(使用者體驗)操作方法,而且不需要使用者付出半分力氣。

《jQuery Mobile快速入門》—— 1.5 響應式設計

繼續閱讀