小屏幕移動設(shè)備網(wǎng)頁設(shè)計(jì)需要注意的事項(xiàng)有什么

小編今天帶大家了解小屏幕移動設(shè)備網(wǎng)頁設(shè)計(jì)需要注意的事項(xiàng)有什么 ，文中知識點(diǎn)介紹的非常詳細(xì)。覺得有幫助的朋友可以跟著小編一起瀏覽文章的內(nèi)容，希望能夠幫助更多想解決這個問題的朋友找到問題的答案，下面跟著小編一起深入學(xué)習(xí)“小屏幕移動設(shè)備網(wǎng)頁設(shè)計(jì)需要注意的事項(xiàng)有什么 ”的知識吧。

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的上林網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

原因是這類網(wǎng)頁起源于一個叫WAP的無線協(xié)議。
WAP能夠運(yùn)行于各種無線網(wǎng)絡(luò)之上，如GSM、GPRS、CDMA等。WML是無線注標(biāo)語言（Wireless Makeup language）的英文縮寫。支持WAP技術(shù)的手機(jī)能瀏覽由WML描述的Internet內(nèi)容。

而如今的小屏幕移動設(shè)備，比如手機(jī)，都已經(jīng)具備訪問WWW的能力。其內(nèi)置的瀏覽器，或是第三方瀏覽器大多是WebKit引擎。
也因此沒人再用WML組織WAP站點(diǎn)了，一般都是用HTML+CSS的方式來建設(shè)WAP網(wǎng)站。

 

在設(shè)計(jì)小屏幕移動設(shè)備網(wǎng)頁時(shí)，你可能先得了解這么一些前提：

• 手機(jī)屏幕分辨率亂得一塌糊涂，什么分辨率都有！

• 我們的手機(jī)上網(wǎng)費(fèi)用賊貴賊貴！

• UC瀏覽器擁有了賊大的市場占有率！

 
關(guān)于UC瀏覽器：

沒錯，不得不提它。誰叫它的市場占有率高呢。
對于UC瀏覽器而言，顯然是非常適合我國國情的，它給用戶最大限度地節(jié)約手機(jī)上網(wǎng)流量。（UC瀏覽器打的口號貌似也就是省流量這一招了）。
基于移動應(yīng)用，以及文本的可讀性，UC瀏覽器也體現(xiàn)了大字體、大行距等特性。
UC瀏覽器相對于其他手機(jī)瀏覽器而言，對HTML標(biāo)簽和CSS屬性存在有特殊的、自定義的處理方式。
而所做的這些特殊處理，按目前來看，應(yīng)該將會繼續(xù)保留較長一段時(shí)間，直到手機(jī)上網(wǎng)費(fèi)用得到較大幅度的下降，令消費(fèi)者更大膽地移動上網(wǎng)之時(shí)。

在實(shí)際開發(fā)中，我們發(fā)現(xiàn)了UC瀏覽器對CSS存在一些“特殊照顧”：

• 不支持font-family屬性，也就是說，在UC瀏覽器你只能看到一種字體；

• 不支持font-szie屬性，也就是說，在UC瀏覽器你只能看到一樣大小的字體；

• 不支持width、height、padding、margin、line-height屬性，也就是說，在UC瀏覽器只能通過p、br等HTML標(biāo)簽來換行以達(dá)到字符上下間隔；

• 不支持固定像素的寬度，100%顯示頁面，也就是說，在UC瀏覽器始終將看到的是“滿屏的”；

• 不支持浮動、層疊布局，float和position屬性無效，也就是說，在UC瀏覽器你只能看到“左對齊”。

• 支持background-color，但不支持background-image，也就是說不支持CSS背景圖顯示，在UC瀏覽器你只能看到背景色。

不過，個人仍然認(rèn)為，如今建設(shè)小屏幕移動設(shè)備網(wǎng)頁網(wǎng)站，完全可依據(jù)WebKit引擎的瀏覽器作為標(biāo)準(zhǔn)進(jìn)行界面開發(fā)。
換句話說，我們設(shè)計(jì)支持UC瀏覽器的網(wǎng)頁，而不是設(shè)計(jì)以UC瀏覽器為標(biāo)準(zhǔn)的網(wǎng)頁。
這樣做還有個好處，可以在大部分的手機(jī)瀏覽器上保證相對一致的樣式。
而針對UC這種連float等標(biāo)準(zhǔn)CSS屬性也不支持的瀏覽器，別過于糾結(jié)它！
但為了保證界面中各元素在UC瀏覽器仍具有良好的閱讀順序，嚴(yán)重建議HTML編碼人員留意各個HTML標(biāo)簽的先后順序。
因?yàn)橹挥性谥С謋loat、position屬性的瀏覽器下，頁面各個容器才可以任意浮動或?qū)盈B的。否則，瀏覽器將按HTML標(biāo)簽的先后順序顯示。

 
另外一些小屏幕移動設(shè)備網(wǎng)頁設(shè)計(jì)的相關(guān)補(bǔ)充：

• 網(wǎng)站頭(header)
  考慮到小屏幕移動設(shè)備的一些特性，設(shè)計(jì)網(wǎng)頁時(shí)，有些可以去掉網(wǎng)站頭（包括LOGO、全局導(dǎo)航什么的）。
  比如flick的查看大圖頁面就去掉了網(wǎng)站頭。 

這里我自創(chuàng)了一句時(shí)髦的設(shè)計(jì)原則：“針對于小屏幕移動設(shè)備的界面設(shè)計(jì)，在某些指定任務(wù)的界面，應(yīng)優(yōu)先于讓用戶關(guān)注當(dāng)前任務(wù)，而不是應(yīng)用程序本身。” 這個原則是行得通的，同樣適用于設(shè)計(jì)移動設(shè)備應(yīng)用程序~
打個比方說，如果你在設(shè)計(jì)小屏幕移動設(shè)備訪問的郵箱時(shí)，完全可以在寫信、郵件閱讀頁去掉網(wǎng)站頭~

• 鏈接聚焦（hover）
  各個瀏覽器均自定義了鏈接的hover樣式，比如有的瀏覽器給鏈接聚焦時(shí)加了邊框，有的瀏覽器給鏈接聚焦時(shí)加個背景色之類。因此小屏幕移動設(shè)備網(wǎng)頁不需要在CSS中編寫hover樣式。

• 鼠標(biāo)事件（mouseover）
  考慮到觸摸屏操作，用戶無法用手指進(jìn)行over的操作，因此應(yīng)禁止在應(yīng)用于移動設(shè)備訪問的網(wǎng)頁使用mouseover。

感謝大家的閱讀，以上就是“小屏幕移動設(shè)備網(wǎng)頁設(shè)計(jì)需要注意的事項(xiàng)有什么 ”的全部內(nèi)容了，學(xué)會的朋友趕緊操作起來吧。相信創(chuàng)新互聯(lián)小編一定會給大家?guī)砀鼉?yōu)質(zhì)的文章。謝謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

本文標(biāo)題：小屏幕移動設(shè)備網(wǎng)頁設(shè)計(jì)需要注意的事項(xiàng)有什么
URL網(wǎng)址：http://muchs.cn/article14/pidhge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站收錄、網(wǎng)站設(shè)計(jì)公司、動態(tài)網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)