基于Bootstrap的農(nóng)業(yè)監(jiān)控系統(tǒng)響應(yīng)式網(wǎng)頁設(shè)計與實現(xiàn)

現(xiàn)代農(nóng)業(yè)是一個廣泛的概念，調(diào)整農(nóng)業(yè)產(chǎn)業(yè)結(jié)構(gòu)的同時 轉(zhuǎn)變農(nóng)業(yè)產(chǎn)值增長方式是目前農(nóng)業(yè)主要的發(fā)展方向。

農(nóng)業(yè)監(jiān)控系統(tǒng)是智慧農(nóng)業(yè)的延伸，依托現(xiàn)代物聯(lián)網(wǎng)技術(shù)， 用戶通過使用多終端設(shè)備就能方便獲取并查看大棚內(nèi)的作物 數(shù)據(jù)信息。但農(nóng)業(yè)監(jiān)控系統(tǒng)在網(wǎng)頁瀏覽的媒介上還存在欠缺， 如通過不同的設(shè)備訪問網(wǎng)頁時會為用戶帶來不同的體驗。因此， 需要在界面設(shè)計和美觀方面改善提升。

傳統(tǒng)頁面布局主要由導(dǎo)航欄、頁腳、主內(nèi)容、左右側(cè)邊 欄構(gòu)成，具體如圖 1 所示。

以農(nóng)業(yè)監(jiān)控系統(tǒng)網(wǎng)頁為例，可以看出整個頁面的信息量 并不大，同時可利用導(dǎo)航欄減少頁面切換，因此很多傳統(tǒng)網(wǎng) 頁都使用類似經(jīng)典設(shè)計。但現(xiàn)代互聯(lián)網(wǎng)發(fā)展迅速，數(shù)據(jù)量大， 容易造成頁面擁擠、結(jié)構(gòu)復(fù)雜、操作不便等問題，不利于用戶 體驗。

此時運用 Bootstrap 自身優(yōu)點，將導(dǎo)航欄移動至頁面最頂 端，而將內(nèi)容區(qū)域置于中間，兩邊分別為左右側(cè)邊欄，底部為 頁腳。這樣設(shè)計可充分利用框架特點，自適應(yīng)瀏覽器頁面。

3 多終端設(shè)備測試

響應(yīng)式是自適應(yīng)不同的應(yīng)用場景，但在內(nèi)容上保持一致 的設(shè)計方式。將分別在 PC 終端和移動端進(jìn)行測試。

3.1 PC 端測試

現(xiàn)在瀏覽器呈多樣化，且網(wǎng)頁渲染效果與瀏覽器內(nèi)核有 關(guān)。 文中選 擇 Trident、Gecko、Blink 以 及 WebKit 內(nèi)核 在 Windows 系統(tǒng)上進(jìn)行測試。由于 IE 瀏覽器兼容性不好，且 對 Bootstrap 不支 持， 故不選 擇 IE 瀏覽 器。1 280×780 和 1 440×900 的效果圖分別如圖 3、圖 4 所示。

3.2 移動端測試

由于移動端設(shè)備的多樣化，需要在不同設(shè)備上進(jìn)行測試。 為此，文中選用 Chrome 調(diào)試模式模擬移動設(shè)備進(jìn)行測試，效 果如圖 5 和圖 6 所示?？梢钥吹骄W(wǎng)頁在移動設(shè)備上顯示時，導(dǎo) 航欄隱藏了，頁面也呈垂直結(jié)構(gòu)。

通過以上測試可知，所有設(shè)計效果和功能都能正常顯示 并應(yīng)用。

 4 結(jié) 語

根據(jù)不同測試結(jié)果分析可知，由于只設(shè)計了大屏和手機(jī) 顯示兩種情況，并且在頁頭部分使用的元素相對較多，使得瀏 覽器兼容性還存在欠缺，此時便依賴媒體查詢來進(jìn)一步自適 應(yīng)屏幕大小。另一方面，瀏覽器的快速更新使得響應(yīng)式問題 逐步得到解決?？傮w來看，雖然響應(yīng)式網(wǎng)頁還存在一些不足， 但網(wǎng)頁可自適應(yīng)并美觀這一目標(biāo)已經(jīng)達(dá)到，大大提高了用戶對 系統(tǒng)的操作體驗。