萬維網(wǎng)不斷發(fā)展和演變，至今已經(jīng)有 27 年歷史。我們?nèi)绾握宫F(xiàn)內(nèi)容和給內(nèi)容添加樣式在萬維網(wǎng)發(fā)展的不同階段有不同的形式，最近新出現(xiàn)的形式是響應式網(wǎng)頁 —— 一個網(wǎng)頁能夠適配多個瀏覽器和不同屏幕大小的設備。當一個網(wǎng)站涉及到越來越多的“物聯(lián)網(wǎng)”（IoT）設備諸如樹莓派、智能手表、語音私人助理以及其他許多 —— 響應式網(wǎng)頁的潛力面臨挑戰(zhàn)。

IoT 意味著更多五花八門的設備從網(wǎng)頁加載內(nèi)容。如果我們想要避免早期的移動和 PC 桌面戰(zhàn)爭的歷史重演，我們就需要確保在這些新設備下，網(wǎng)頁仍然能夠像使用其他常用設備那樣可訪問和可用。我們最不愿意見到的事情是不得不為 IoT 設計一個版本的網(wǎng)頁，然后為移動和 PC Web 設計另外一個版本。

哪些 IoT 設備可能呈現(xiàn)網(wǎng)頁？

許多開發(fā)者不太意識到潛在的眾多設備在未來很可能嘗試展現(xiàn)網(wǎng)頁內(nèi)容給用戶。

擁有小屏幕顯示器的計算設備

Adafruit 生產(chǎn)的配有一個 2.8 英寸觸屏的樹莓派

一些設備例如配有 2.4 英寸或者更大一些的微型顯示屏的樹莓派能使用 Wi-Fi、以太網(wǎng)甚至 3G/4G 網(wǎng)絡，使得它很有可能用來展現(xiàn)網(wǎng)頁內(nèi)容。這個內(nèi)容可能是來自萬維網(wǎng)的網(wǎng)站或者本地網(wǎng)頁例如嵌入式設備的說明書、基于網(wǎng)頁的設備控制頁面以及以網(wǎng)頁方式呈現(xiàn)的后臺系統(tǒng)儀表盤。

智能手表擁有更小的顯示屏，與傳統(tǒng)的顯示屏在可顯示顏色范圍和屏幕分辨率上有明顯的區(qū)別。雖然 Apple Watch 還沒有內(nèi)置 Web 瀏覽器，Android 上有一個 Appfour 開發(fā)的 Android Wear 版的 Web 瀏覽器 ，而很有可能隨著時間的推移，更多智能手表的 Web 瀏覽器將問世（假設有人某天突然領悟了如何為手表設計一款易于使用的 Web 瀏覽器?。Ｖ辽?，如果 Web 真正能在任何設備上做到適配和可用，我們就能為（大量手表瀏覽器問世的）這一天做好準備。如果在將來，有人在他的智能手表上讀 email，當他點擊郵件里的鏈接，會發(fā)生什么？一個簡單的 Web 瀏覽器出現(xiàn)在一個強大的智能手表上的那一天不會太遙遠。

在計算機領域的一個新的趨勢是智能語音服務，例如 Apple 的 Siri、Amazon Echo 的 Alexa、Google Now 以及 Microsoft 的 Cortana。這些助理在家居生活中可以起到的作用包括控制開關燈、設置鬧鐘、調(diào)節(jié)空調(diào)溫度等等。這些服務響應語音控制，對提問進行在線數(shù)據(jù)檢索 —— 通常這涉及到匹配每個公司的數(shù)據(jù)庫信息來找到詳細答案，而這些答案數(shù)據(jù)本身來自于用戶自身對這些服務的使用。對于這一有趣的領域，我之前在 SitePoint 這里寫過如何上手建立你自己的簡單的人工智能助手的內(nèi)容，其中一部分在“Five Simple Ways to Build Artificial Intelligence in 2016 以及一系列文章關于 “How to Build Your Own AI Assistant Using Api.ai”。

隨著時間的推移，隨著人工智能和機器學習的改進，這些智能助理可能會在網(wǎng)頁上尋找信息，將其中的一些內(nèi)容反饋給我們。

為了讓這成為可能，網(wǎng)頁需要保持可訪問性，讓機器人可讀取內(nèi)容，而不僅僅是將它視覺上展現(xiàn)出來。理想而言，網(wǎng)頁本該已經(jīng)被結構化，以適合屏幕閱讀器閱讀，然而采用可訪問的標簽常常是事后才有的想法。私人助理 AI 服務的出現(xiàn)，可能有助于改變這一現(xiàn)狀。

物聯(lián)網(wǎng)時代未來的計算機顯示，能夠包含一系列新的和非常神奇的可能性。想想一些設備例如智能鏡子、智能窗戶，智能汽車儀表盤 —— 這些變化將在我們的生活中隨處發(fā)生，但是 Web 在這些新設備上展現(xiàn)的效果如何？一系列新的設計決策將產(chǎn)生 —— 在鏡子/窗戶上顯示內(nèi)容，你可能需要有更多的顏色對比度。開發(fā)者開發(fā)鏡子/窗戶的顯示內(nèi)容是否需要考慮限制使用的顏色范圍？未來將迎來全新的（和令人興奮）的世界。

梅賽德斯·奔馳的儀表盤原型 （圖片來源： Mercedes Benz）

讓我們的 CSS 和標記語言適用于未來

如果我們想擁有一個與新技術很好地相結合的 Web 未來，開發(fā)者需要密切關注幾個關鍵領域。

真正的響應式 CSS

網(wǎng)頁需要適配到微型顯示器，在它之上保持相對可讀。CSS將是適配非常小的顯示分辨率的關鍵。CSS 是否能像處理移動網(wǎng)站那樣處理微型屏幕？我們是否需要創(chuàng)建新的規(guī)則和標準來以更大的字體顯示文本？是否需要新的類似于 Flexbox 的標準來為微型屏幕調(diào)整布局？是否需要新的標準來給微型顯示器的菜單增加樣式？時間會說明一切，但是一些選擇了使用 Web 的開發(fā)者可能會成為這一領域的先驅(qū)，而社區(qū)將如何跟進會是一件非常吸引人的事。

picture 元素

《picture》 元素讓我們能夠指定多張圖片來根據(jù)不同的分辨率和設備類型決定加載哪一張圖。這一規(guī)范將是確保在相對低功率的設備和慢速連接設備，以及非常小的分辨率無法顯示大圖的設備上平滑運行網(wǎng)頁的關鍵。

依賴 JavaScript 很危險

一些低功率設備和個人輔助設備將讀取網(wǎng)頁內(nèi)容，但它們可能不需要運行 JavaScirpt 或者不能像智能手機和平板電腦那樣處理 JavaScript。如果你的網(wǎng)站依賴 JavaScript 來拉取數(shù)據(jù)又沒有任何向后兼容，較新的 IoT 設備很可能不能訪問你的網(wǎng)站。確保網(wǎng)頁在沒有 JavaScript 的時候能工作依然是一件值得做的事情！

WAI-ARIA 及其他無障礙技術

現(xiàn)有技術已經(jīng)能夠讓 Web 被那些殘障人士無障礙使用，他們一樣可以使用人工智能、私人助理和其他基于語音的技術。用 WAI-ARIA 和其他無障礙技術建立網(wǎng)站可能有助于減少未來的返工量，并且在當下也對殘障人士非常有幫助。我們涵蓋了這個話題的一些細節(jié)內(nèi)容在 “How to Use ARIA Effectively with HTML5” 以及 “Avoiding Redundancy with WAI-ARIA in HTML Pages”。

顏色和設計選擇

基于鏡子和窗戶的顯示可能需要從設計上提高顏色對比度來確保它在浴室、天空和其他房間等有豐富背景色的場景下能夠清晰顯示。

顯示設備諸如智能鏡子可能顯示內(nèi)容的方式類似我們今天的操作系統(tǒng)里的 “高對比度模式”，這個模式反轉(zhuǎn)你的屏幕顏色來提高對比度。為了在這樣不同形式的顯示設備上顯示內(nèi)容，智能鏡子可能需要采用同樣的技術。如果你的網(wǎng)頁設計能夠在高對比度模式下很好地展現(xiàn)并且讓你的網(wǎng)站主題在這樣的模式下有強烈的色彩對比，那么這就不成為問題了。

我的藝術家對高對比度 SitePoint 的印象：Max Braun’s concept smart mirror

DOM 復雜度

盡管臺式機和智能手表都能處理復雜的 DOM 結構以及大量嵌套元素和 CSS transitions，但是 IoT 設備和可穿戴設備在處理復雜 DOM 時出問題是完全有可能的。保持一個簡潔的 DOM 元素結構可能對提升這些新設備的性能比以往任何時候都重要。

測試將變得艱難

在智能手機、桌面平板、智能電視和桌面操作系統(tǒng)上測試你的網(wǎng)站已經(jīng)相當困難，因為物聯(lián)網(wǎng)和其他技術不斷進步（虛擬和增強現(xiàn)實也來了?。?，充分測試每一種設備變得越來越困難。采用 Web 標準、無障礙標準以及上面提到的思路將有助于讓網(wǎng)頁設計盡可能可用。

一定程度的遠見將成為未來十年內(nèi)專業(yè)的 Web 開發(fā)人員的必要技能，因為他們需要在不實際接觸每個具體設備來進行測試的情況下，想象網(wǎng)頁設計將如何在一系列設備上展現(xiàn)。

通用的 API

響應式網(wǎng)頁將不會是物聯(lián)網(wǎng)上唯一的基于 Web 的信息源。響應式網(wǎng)頁將會有一個同伴，它與響應式網(wǎng)頁同樣重要，我們之前討論過它 —— the Omnipresent API（通用的 API）。這將是 server 端等同于 Web 的重要性的技術，它能夠加快新技術的集成和適配，觸及 Web 瀏覽器自身達不到的領域。通用的 API 是指 API 能夠以平臺無關的方式，為一個應用或服務提供功能或數(shù)據(jù)訪問。缺少了通用 API，響應式網(wǎng)站就沒有了適應性，也導致新技術的每一部分彼此分離，不能融合到一起。

響應式 Web 和通用 API 都存在是至關重要的。我們的響應式 Web 將由可以適用于各種技術的通用 API 來填充內(nèi)容。沒有 Web 瀏覽器的設備應該有應用軟件可以通過通用 API 來填充內(nèi)容。一旦一臺設備訪問了 Web 瀏覽器，內(nèi)容也應該能夠通過響應式 Web 來訪問。要了解通用 API 的更多內(nèi)容，可以讀一讀我的作品： “［The Era of the Omnipresent API］”（https://devdiner.com/opinion/the-era-of-the-omnipresent-api）。

結論

我們前端開發(fā)實踐者可以不做上面這些改變來適應物聯(lián)網(wǎng)和其他技術演變。然而，我相信如果我們不去改變，Web 技術將被限制于桌面應用和少量移動應用，正如響應式 Web 的真正潛力被移動 App 的盛行所阻礙。如果 Web 不適應，我們可能會看到應用軟件分割為可穿戴 App、IoT App、Alex App 等等，這些 App 成為孤島 —— 而不是分享 Web 的共同生態(tài)圈。