HTML5工具作屏幕自適應的兩種方法

近一兩年，HTML5在中國很火，也出了很多HTML5工具和模板。別的先不說，對於不一樣的H5工具，解決屏幕自適應問題的區別是什麼？

 

簡單來講，感應式設計是當用不一樣設備訪問時，可以根據設備的寬度和高度對設備進行動態的適配。例如，用iPhone四、iPhone五、iPhone六、PC、iPad訪問同一個H5網頁，都能打開一個適合該設備的一個HTML5頁面，不留白邊，不變形。

 

因爲設備分辨率和長寬比都不一樣，若是設計一次就能適應全部的屏幕（包括移動端和PC端），幾乎不可能。緣由有三： 

1. 若是等比例縮放，內部位置關係會發生變化，就會嚴重影響用戶體驗；同時，設備屏幕之間不存在等比例的關係，因此一樣會有部分屏幕內容沒法顯示或留白邊；

2. 若是把小屏幕適配好，放在更高的大屏幕裏面，那兩邊就會有白邊；或者把圖扯大，這樣就會變形；

3. 若是把大屏幕適配好，放在小屏幕中，就有些部分會丟失。

 

所以，除非藉助將來的AI（人工智能）的發展，不然很難自動解決這個問題。而之前的網站，也只能分開幾種版面進行設計，例如根據寬度大小採用設計板式。

 

那如今的HTML5工具是如何實現感應式設計的？經研究發現，共有兩種方式，第一種是僞感應式設計（以易企秀爲例），第二種是多版面感應式設計（以iH5.cn爲例）。

 

 

上圖是易企秀的測試結果，依次是iPhone四、iPhone五、iPhone6對同一網頁的顯示狀況。使用iPhone4時，變形最嚴重；iPhone5效果最好；iPhone6是等比例縮放後，兩側邊緣，有些像素顯示不了。因此能夠基本判斷這個HTML5工具按照iPhone5爲標準版型。所以，這種感應式設計被稱爲僞「感應式」，設計時不會留白邊，但要求儘可能把內容都往中間放，這就須要設計一張名爲「背景」的底圖，用於拉伸時用。

 

[存在問題]

1. 內容都要居中放，不能放上下邊緣，例如把按鈕放到最下面，iPhone打開後就看不到按鈕了；

2. 不可能適應PC、Pad等設備。

 

這種僞感應式設計比較簡單，但也只能在應急時使用，若是想要儘量實現完美適應，就須要採用多版面感應式設計。

 

能讓網頁自動適應多個屏幕的HTML5工具，須要爲不一樣尺寸和分辨率的設備設置不一樣的屏幕。iH5.cn採用的就是這種多版面感應式設計，提供在編輯H5頁面時添加多個屏幕，用戶能自主爲不一樣屏幕設計適於顯示的頁面。它自己原理是添加Device控件，若是是手機端的輕應用通常採用iPhone 四、五、6的分辨率便可。

 

 

這樣的話，纔可能用一個URL地址，完美適應多個屏幕，包括PC端和Pad，而不會出現任何變形或丟失狀況。