天天看點

【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)

<a href="http://www.cnblogs.com/peunzhang/p/4517864.html#intro">原理及說明</a>

<a href="https://github.com/peunzhang/pageresponse" target="_blank">github位址</a>

<a href="http://www.cnblogs.com/peunzhang/p/4517864.html#eg">真實案例</a>

<a href="http://www.cnblogs.com/peunzhang/p/4517864.html#contain">contain模式(推薦)</a>

<a href="http://www.cnblogs.com/peunzhang/p/4517864.html#cover">cover模式</a>

<a href="http://www.cnblogs.com/peunzhang/p/4517864.html#auto">auto模式(預設模式)</a>

<a href="http://www.cnblogs.com/peunzhang/p/4517864.html#fullpage">結合fullpage滑屏架構的例子</a>

<a href="http://www.cnblogs.com/peunzhang/p/4517864.html#go">快速上手</a>

使用transform:scale縮放頁面,要求視覺稿高清

頁面以px為機關即可讓h5适配各種移動裝置,适配原則根據視覺稿比例縮放頁面

相容性良好,支援ios4+、android2.3+、winphone8+系統

大小1k,零依賴

三種适配模式可選 auto || contain || cover

不同手機看效果,同一手機切換橫豎屏看效果

【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)
【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)

保持頁面的寬高比,調整頁面的寬度或高度(較大者),使頁面完全包含在浏覽器視窗中

頁面水準垂直居中,左右或上下可能出現空白,頁面背景使用純色或可複制背景可解決此類問題

适合滑屏頁面、單屏頁面

<a href="http://peunzhang.sinaapp.com/demo/pageresponse/pageresponse_contain.html" target="_blank">預覽</a>

【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)
【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)

保持頁面的寬高比,調整頁面的寬度或高度(較小者),使頁面完全覆寫浏覽器視窗

頁面水準垂直居中,超出浏覽器視窗左右或上下的内容會被隐藏

适合滑屏頁面、單屏頁面,且頁面邊緣無重要内容

<a href="http://peunzhang.sinaapp.com/demo/pageresponse/pageresponse_cover.html" target="_blank">預覽</a>

【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)
【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)

保持頁面的寬高比,調整頁面的寬度,使頁面寬度完全包含在浏覽器視窗中

<a href="http://peunzhang.sinaapp.com/demo/pageresponse/pageresponse_auto.html" target="_blank">預覽</a>

【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)
【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)

<a href="http://peunzhang.sinaapp.com/demo/pageresponse/pageresponse_fullpage.html" target="_blank">預覽</a>

【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)
【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)

meta的viewport設定:

啟用插件代碼示例一:

【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)
【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)

啟用插件代碼示例二:

【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)
【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)
【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)
【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)目錄(更新于20151013)

<a href="https://github.com/peunzhang/pageresponse" target="_blank">demo下載下傳</a>

歡迎大家使用,插件還有很多的不足,對于複雜的頁面并不合适,具體結合實際項目,任何問題歡迎留言探讨~

祝大家粽子節快樂~

作者:白樹