現(xiàn)代農(nóng)業(yè)是一個廣泛的概念，調整農(nóng)業(yè)產(chǎn)業(yè)結構的同時 轉變農(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)技術， 用戶通過使用多終端設備就能方便獲取并查看大棚內(nèi)的作物 數(shù)據(jù)信息。但農(nóng)業(yè)監(jiān)控系統(tǒng)在網(wǎng)頁瀏覽的媒介上還存在欠缺， 如通過不同的設備訪問網(wǎng)頁時會為用戶帶來不同的體驗。因此， 需要在界面設計和美觀方面改善提升。

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

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

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

3 多終端設備測試

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

3.1 PC 端測試

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

3.2 移動端測試

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

通過以上測試可知，所有設計效果和功能都能正常顯示 并應用。

 4 結 語

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