摘 要：蔬菜溯源系統(tǒng)提供了對(duì)蔬菜安全的全程跟蹤，可以有效緩解蔬菜的安全問題。本文針對(duì)系統(tǒng)中的溯源數(shù)據(jù)在消費(fèi)者終端設(shè)備的不同的呈現(xiàn)進(jìn)行了研究。通過采用CSS3中所引入的Media Query模塊，采用相對(duì)寬度、相對(duì)大小等形式進(jìn)行了實(shí)踐。通過實(shí)踐得出了一種可行的方法，在文中我們對(duì)此方法進(jìn)行了闡述。

關(guān)鍵詞：溯源；自適應(yīng)網(wǎng)頁；CSS3

1 概述

食品安全是關(guān)系到人身安全的大事，在食品安全越來越受關(guān)注的時(shí)候，人們對(duì)食品安全提出了越來越高的要求。建立適宜的農(nóng)產(chǎn)品溯源體系不僅能為人民生活提供安全優(yōu)質(zhì)的農(nóng)產(chǎn)品，也能夠打破國外食品安全追溯而設(shè)置的貿(mào)易壁壘，提高我國農(nóng)產(chǎn)品的國際競(jìng)爭(zhēng)力。

因?yàn)橐苿?dòng)設(shè)備種類的多樣性和移動(dòng)網(wǎng)絡(luò)的快速發(fā)展，要為消費(fèi)者提供快速、易用的溯源請(qǐng)求響應(yīng)，成為了設(shè)計(jì)者面對(duì)的一個(gè)大難題：如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的數(shù)據(jù)信息？手機(jī)的屏幕比較小，寬度通常在600像素以下；臺(tái)式機(jī)或筆記本電腦的屏幕寬度，一般都在1000像素以上（目前主流寬度是1366×768）。同樣的內(nèi)容，要在大小完全不同的屏幕上，都呈現(xiàn)出滿意的效果，并不是一件易于實(shí)現(xiàn)的事。

很多系統(tǒng)的解決方法，是為不同的設(shè)備提供不同的網(wǎng)頁，比如專門提供一個(gè)移動(dòng)設(shè)備版本，一個(gè)ipad版本和一個(gè)電腦版本。這樣做固然保證了效果，但是工作量較大，并且同時(shí)需要維護(hù)好幾個(gè)版本，會(huì)大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度和軟件維護(hù)的難度。有沒有能很好地解決這個(gè)問題的辦法，本文對(duì)這個(gè)問題進(jìn)行了理論探討和實(shí)踐性研究。

2 設(shè)計(jì)思路

蔬菜安全溯源系統(tǒng)主要用于管理蔬菜從生產(chǎn)中心、加工中心、運(yùn)輸過程到銷售地點(diǎn)的整個(gè)過程，讓消費(fèi)者和監(jiān)管部門可以追根溯源。本系統(tǒng)包含三大塊內(nèi)容：①生產(chǎn)者、運(yùn)輸者和銷售者提供過程數(shù)據(jù)，采集到溯源系統(tǒng)數(shù)據(jù)庫；②溯源平臺(tái)對(duì)監(jiān)管部門提供監(jiān)管借口，確保過程采集數(shù)據(jù)真實(shí)有效；③滿足最終消費(fèi)者對(duì)產(chǎn)品進(jìn)行溯源的需求，也就是提供查詢功能。蔬菜安全溯源系統(tǒng)架構(gòu)見圖1。

其中，消費(fèi)者對(duì)產(chǎn)品信息的溯源可能通過銷售地點(diǎn)所提供的觸摸屏系統(tǒng)來進(jìn)行，也可能通過隨身攜帶的手機(jī)等移動(dòng)設(shè)備來聯(lián)網(wǎng)溯源，還有可能通過家用臺(tái)式電腦或筆記本電腦來進(jìn)行溯源。也就讓我們所提供的溯源數(shù)據(jù)面對(duì)著來自不同屏幕大小的設(shè)備的請(qǐng)求。本文也就以此為例來對(duì)如何讓頁面自動(dòng)適應(yīng)不同大小屏幕的顯示進(jìn)行了研究。

3 關(guān)鍵技術(shù)

3.1 PHP服務(wù)端技術(shù)

PHP（英文名稱PHP： Hypertext Preprocessor，中文名稱“超文本預(yù)處理器”）是一種通用開源腳本語言。語法吸收了C、Java和Perl語言的特點(diǎn)，易于學(xué)習(xí)，應(yīng)用廣泛，主要適用于Web開發(fā)領(lǐng)域。它比CGI或者Perl更快速地執(zhí)行動(dòng)態(tài)網(wǎng)頁。用PHP做出的動(dòng)態(tài)頁面與其他的編程語言相比執(zhí)行效率更高，同時(shí)PHP也可以將程序嵌入到HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）文檔中去執(zhí)行。在本系統(tǒng)中，主要用于在服務(wù)端和數(shù)據(jù)庫間的通訊，并為監(jiān)管部門和最終用戶提供監(jiān)管接口和溯源數(shù)據(jù)。

3.2 自適應(yīng)網(wǎng)頁技術(shù)

“自適應(yīng)網(wǎng)頁設(shè)計(jì)”（Responsive Web Design）最早是在2010年由Ethan Marcotte提出，指可以自動(dòng)識(shí)別屏幕寬度并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)方法。相對(duì)于傳統(tǒng)的網(wǎng)頁設(shè)計(jì)，其主要區(qū)別在于：①網(wǎng)頁能根據(jù)屏幕的寬度進(jìn)行調(diào)整；②網(wǎng)頁的布局采用流式布局；③頁面寬度、字體等不能采用絕對(duì)大小，應(yīng)采用相對(duì)大??；④選擇加載的CSS文件。

這行代碼意思是，如果最大屏幕寬度不超過600像素（max-device-width：600px），就加載microScreen.css文件，從而實(shí)現(xiàn)在不同的屏幕寬度設(shè)備下，加載不同的顯示配置文件。也就是網(wǎng)頁能夠自動(dòng)適應(yīng)屏幕的技術(shù)基礎(chǔ)。

4 關(guān)鍵實(shí)現(xiàn)及分析

4.1 PHP動(dòng)態(tài)頁面代碼

實(shí)現(xiàn)后，在電腦端呈現(xiàn)結(jié)果顯示正常，同時(shí)在手機(jī)端呈現(xiàn)的測(cè)試數(shù)據(jù)顯示結(jié)果如圖2，正常。

5 展望

本文通過PHP動(dòng)態(tài)生成數(shù)據(jù)，再在html端重點(diǎn)運(yùn)用CSS3中所引入的Media Query模塊所提供的工作，針對(duì)不同的屏幕顯示進(jìn)行了實(shí)踐研究。在本文研究的基礎(chǔ)上，可以對(duì)在不同屏幕上顯示不同大小的圖片進(jìn)行改進(jìn)，也就是根據(jù)屏幕，加載不同的圖片。有待諸位同行一起進(jìn)行進(jìn)一步的研究。

參考文獻(xiàn)：

[1]張偉，何勇，等.基于無線傳感器網(wǎng)絡(luò)與模糊控制的精細(xì)灌溉系統(tǒng)的設(shè)計(jì)[J].農(nóng)業(yè)工程學(xué)報(bào)，2009.

[2]劉愛軍.物聯(lián)網(wǎng)技術(shù)現(xiàn)狀及應(yīng)用前景展望[J].物聯(lián)網(wǎng)技術(shù)，2012.

[3]白志強(qiáng)，白志剛，等.21天學(xué)通PHP[M].電子工業(yè)出版社，2009.

作者簡(jiǎn)介：姚世明（1979-），男，江蘇姜堰人，研究方向：軟件工程、應(yīng)用軟件設(shè)計(jì)與開發(fā)。