標籤：
- 行動裝置 App開發中調適型配置是非常重要的，因為不同裝置解析度不一樣，大小也不一樣，不採用調適型配置在不同的裝置中顯示會出現各種問題
- 能夠起到調適型配置的方法
- CSS3中的調適型配置
- 百分比布局法：即大小，位置，邊距等用百分比來限制，能夠在不同的裝置中佔據總體的布局一致
- webkit-box結合-webkit-box-flex布局法：使用webkit-box能夠實現彈性盒子模式布局，結合-webkit-box-flex能夠實現將螢幕完全分割的布局，與半分比不同的是：百分比布局在存在border的時候不好控制，因為如果總體是100%，再加上border就會超過總體值，當然也可以在使用百分比的基礎上加上box-sizing:border-box將border設定為佔用內部空間來解決這個問題，但是現在主流的布局還是使用webkit-box
- 媒體查詢布局法：@media screen and (max-width:400px),採用媒體查詢法定義不同型號裝置使用的樣式，給每種尺寸的裝置分別定義樣式，這種方法有一定的作用，但是在Android裝置越發混亂的市場狀況下，裝置尺寸越來越繁雜，不適合整體靠媒體查詢來實現調適型配置
- JS中動態實現調適型配置
- 通過JS擷取螢幕大小，經過計算動態建立布局，這種方式太複雜，而且在移動端影響體驗，基本被拋棄
- 監聽resize事件與oritationchange事件實現在裝置狀態發生改變時對應布局的改變
Android中通常採用dp與sp為單位進行布局，因為採用這兩個單位會根據裝置解析度進行自動縮放，預設將裝置寬度都定義為360dp
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-
- 首先需要viewport支援，這種設定方式在Appcan、HBuilder、apicloud中都支援，針對此種設計方法有哪些調適型配置方法？
- 頁面在webview中的顯示原理：頁面在webview中的真實大小一般是360，然後將其拉升到響應的解析度，因此html在webview中的線條是那麼的粗，看上去就明顯不是1px，那是因為最終顯示是經過放大後的，並不是一個物理像素，通常是1.5或者2個物理像素，因此整個介面看上去是那麼的粗，不夠精緻，圖片也是放大後的，可能會出現模糊現象
- 這種布局特點：
- px：不同尺寸不同解析度中px同樣px值大小是一樣的，即是固定大小
- em：根據字型設定大小來顯示，對於不同解析度的裝置來說是不一樣大的，即是可縮放大小嗎，與dp和sp類似，建議不置中採用該單位進行布局
- 精細化布局方式
- 首先研究原理，在Android中1px並不是1物理像素，而是經過放大後的，但是在IOS中卻是真實的1物理像素，這樣使得應用在IOS中看上去效果要好的多，這是為什嗎？
- IOS中的UIWebview會識別html5中viewport中的width屬性，根據width屬性來改變裝置的解析度與物理像素比例
- Android中相對的屬性是target-densitydpi，但是在Android4.4以後就廢棄了這個屬性，也就是說使用4.4以後的Android SDK 打包就不能支援該屬性
- 在apicloud中，編譯環境採用的是4.4以上的Android SDK,即不支援target-densitydpi屬性，不能夠使整個應用精細化，很多人想方設法實現1px線條，通過:after或:before來添加一個1px的div，然後對div進行縮放，實現真實1px線條，但是這樣做太繁瑣，而且解決不了圓角的問題，其他地方都變成1px了，按鈕卻還是粗border，這樣更加影響體驗
- HBuilder在最初採用的是API20環境打包的，也不支援該屬性，但是最近改成了API19，實現了對於該屬性的支援，可見雖然Android官方廢除了，但是其作用仍然很大
- Appcan一直以來都是使用的4.4以下的Android SDK環境打包的，因此一直支援該屬性，有人曾經說過Appcan用的是Android2.3的引擎，apicloud用的是4.4以後的引擎，因此apicloud比Appcan速度更加快，這些只是那些不懂的人才會說的，現如今Appcan的速度卻等同於甚至高於apicloud怎麼解釋？看我發的測試隨筆就知道
- 建議：
- 使用HBuilder與Appcan的開發人員頁面中一定要加上
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
來顯示精緻化介面，在布局中採用em來布局，因為這樣設定後px在不同解析度下得到的效果是不一樣的
- 在apicloud中布局使用px與em在不同裝置上真實差距不是很大
- 也希望apicloud能夠適配target-densitydpi屬性的支援，而不要像論壇版主問他為什麼放棄使用該屬性，就說Android不支援了，HTML5定稿中廢棄了該屬性，說我鑽牛角尖，既然別人能用，你為什麼不能用，廢棄並不代表不可以用，Android中廢棄的方法多了去了，有的方法還不是照樣使用
行動裝置 App開發之調適型配置與單位（px、em）選擇
