這篇文章主要介紹了HTML5 移動頁面自適應手機屏幕四類方法總結，非常具有實用價值，需要的朋友可以參考下1使用meta標簽viewportH5移動端頁面自適應普遍使用的方法，理論上講使用這個標簽是可以適應所有尺寸的屏幕的，但是各設備。

HTML頁面何適應不同分辨率的顯示器可以通過響應式布局自適應網(wǎng)頁設計等方法1響應式布局設計響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，響應式布局就是實現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的。

在css中定義一個控制embed的div樣式， 自適應可以利用的浮動元素的尺寸可以通過margin來調整，然后讓body的高度要設為100%，這樣內(nèi)部的div的高度設為100%才有效，寬度嘛不用管他，div默認就是自適應寬度的 東莞匯鑫。

1新建一個HTML文件，代碼如下圖 2打開HTML文件所在的文件夾，雙擊文件，跳轉到瀏覽器 3改變?yōu)g覽器大小，發(fā)現(xiàn)圖片沒有變化，顯示不全 4在所在文件夾下，新建一個樣式文件，命名為 autocss，代碼如下 5在HTML文。

可以用JS監(jiān)控屏幕大小，然后調整Canvas的大小在代碼中加入JS windowresizeresizeCanvas function resizeCanvas canvasattrquotwidthquot， $windowget0innerWidth canvasattrquotheightquot， $window。

3輸入backgroundsize coverwebkitbackgroundsize coverobackgroundsize cover使圖片隨屏幕大小同步縮放，但是有部分可能會被裁切，不過不至于會露白，下面兩句是為chrome和opera瀏覽器作兼容4輸入back。

只有內(nèi)嵌css有效，外部css會出現(xiàn)拉伸的情況，所以有兩種方案 var myCanvas = quotltcanvas id=#39myCanvas#39 width=#39quot + screenavailWidth + quotpx#39 height=#39quot+ screenavailHeight + quotpx#39ltvanvasquot。

結論要做真正的“感應式”設計，自動適應多個屏幕，又不想寫代碼，就只能用互動大師。