這幾年隨著移動設備的不斷普及, 使用手機和平板電腦觀看網頁的幾率大增, 因此, 網頁從簡單的HTML進化到必須符合各種分辨率的屏幕, 這是一個不可避免的趨勢。
目前開發(fā)針對于移動設備的APP非常流行, 各大網站都有其相應的APP。但是在學習編寫APP的時候, 我感覺到有幾個問題值得探討。第一, 現(xiàn)在最流行的手機操作平臺有兩個:Android和IOS, 其編程難度都不低;第二, 與網站可以直接瀏覽不同, 使用者必須另外下載APP。當然另外寫一個APP可以提供更具有針對性的服務, 但是提供一個手機瀏覽器可以瀏覽的版本也是必要的。
1、使用React.JS開發(fā)自適應網站
對于開發(fā)自適應網站而言, 在現(xiàn)在發(fā)達的開源社區(qū)中, 我們有很多可以使用的好東西。Bootstrap3和React.JS就是其中的佼佼者。
Bootstrap是一個前端的Framework, 可以使我們節(jié)省很多花費在編寫CSS身上的時間。作為設計自適應網站的重點, CSS具有比較容易的會有硬件加速等的優(yōu)化;另外, 為了提高效率, 能用CSS做到的, 就盡量不要用Java Script來實現(xiàn)。
React.JS (以下簡稱React) , 是Facebook底下的開源項目, Instagram就是使用React開發(fā)的。React是個JS框架, 同時也是個新的網頁開發(fā)概念。隨著這幾年來的蓬勃發(fā)展, 一直不斷推陳出新, 甚至可以用來開發(fā)i OSApp。
React讓網頁開發(fā)變成一種簡單的概念。和以往使用JQuery或是其他的套件有很大不同的是, React把網頁中的元素當成一個一個的“組件”, 先定義“組件”, 再將“組件”塞進網頁中。這樣的做法有幾個好處:第一、我們可以重復使用相同的組件, 卻只要定義一遍;第二、我們可以享有React提供的渲染優(yōu)化。所謂的渲染優(yōu)化, 就是React對于網頁內容呈現(xiàn)的處理方式加以優(yōu)化的算法。在呈現(xiàn)一個新網頁之前, React會先將新舊網頁的內容加以比較, 找出兩者相異之處后, 再以修改舊網頁的文件對象的方式達成新網頁的呈現(xiàn)。相較于傳統(tǒng)瀏覽器整個重新剖析計算新網頁, React可以讓瀏覽器呈現(xiàn)網頁的效率大為增進。
使用React, 網頁分成了“組件”和“數(shù)據(jù)”, 只要管理數(shù)據(jù), 讓React來負責渲染。這樣的作法, 我們可以很容易地開發(fā)出一個純AJAX網站, 讓網頁加載后, 便不再需要重新整理, 全部使用JS去抓“數(shù)據(jù)”。還有一個好處就是不用再為處理這些數(shù)據(jù)而傷透腦筋, 只要將數(shù)據(jù)放進該放的地方就好。使用React的數(shù)據(jù)流寫前端的時候, 我們只要考慮整體, 而不用考慮細節(jié)。而分工從一般網頁設計上的功能性分工, 變成“組件”各自處理自己的部分, 而“組件”中還可以遷入其他組件, 形成一個數(shù)據(jù)流。
2、開發(fā)中遇到的問題
3.1 舊版IE瀏覽器
因為IE老舊, 而有些地方又常常指定使用舊版IE (如IE8) , 導致目前還有大量舊版IE使用者。
IE11是一款可支持HTML5標準的瀏覽器, 所以我選擇支持。當然, 我們還是必須另外寫一些程序代碼讓網頁支持IE11。
使用最新的瀏覽器, 我們可以使用最新的標準來編寫網站, 而不用遷就舊版IE瀏覽器, 套件也可以用最新版。最新版往往功能較多或是效率較高, 如JQuery 2.X以后版本不支持舊版IE。
3.2 不同的瀏覽器
每個瀏覽器的行為和支持的JS、CSS方法不同, 撰寫自適應網站一定要用各種瀏覽器測試, 不然就會出現(xiàn)意外的狀況。如果不想使用太多瀏覽器, 除了Chrome外, 至少還要再使用Fire Fox, 因為Fire Fox是一款非常遵守HTML5標準的瀏覽器。
3.3 不同的屏幕大小
這是一個基本的問題, 不同屏幕大小會影響你的網頁瀏覽模式, 有些時候不是調整一下DIV寬度就可以解決的。
諸如此類還有一些按鈕、表格等, 如果可以的話, 一開始就設計一個可大可小的顯示方法, 不然的話, 就必須針對不同的大小, 提供不同的網頁設計。手機優(yōu)先是現(xiàn)在的主流, 設計樣式時以小屏幕設計常?？梢缘玫奖容^好的效果。
3.4 操作的模式和JS事件
手機上的觸控, 是不適用鼠標事件的, 而是另外定義一個“觸控事件”, 還有手機上不容易觸發(fā)Hover事件, 有些因為手機屏幕小, 很難進行精準的點擊。根據(jù)上述原因, 設計自適應網頁給手機使用者使用時, 一定要注意按鈕的大小不能太小, 也不要在網頁上放太多Hover的事件, 如果有用到mousedown、mouseover等鼠標事件, 也一定要注意另外定義touchstart、touchmove事件。
3.5 不要使用外掛功能, 如Flash
這里的外掛指標準 (HTML/CSS/JS) 之外的網頁外掛工具, 像是Flash, 因為手機版瀏覽器可能不支持這些外掛, 很難跨平臺?，F(xiàn)在的Android已經預設不使用Flash了, HTML5標準中也有很多更好用、效率更高的對象能夠取代Flash, 現(xiàn)在我們有更好的選擇, 使用大量外掛開發(fā)網頁的時代已經過去了。
3.6 網頁加載速度
其實這個問題不只在自適應網站上會有, 一般網站也該注意。
使用了很多套件、自適應的CSS檔案, 我們的網頁常常會很肥大, 尤其是移動設備常常不會有良好的網絡環(huán)境, 瀏覽網站一次可能就要加載好幾秒甚至幾分鐘。
盡量不要加載不必要的CSS、JS, 然后啟用壓縮功能, 把空白和換行壓縮掉, 并用gzip壓縮, 大概可以讓整個網頁變成原本的20%甚至更小。

網站標題：行業(yè)動態(tài)自適應網頁設計問題
文章路徑：http://jinyejixie.com/news16/152516.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網站內鏈、網站收錄、用戶體驗、網站建設、靜態(tài)網站

廣告

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