<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
不同手機看效果,同一手機切換橫豎屏看效果
保持頁面的寬高比,調整頁面的寬度或高度(較大者),使頁面完全包含在浏覽器視窗中
頁面水準垂直居中,左右或上下可能出現空白,頁面背景使用純色或可複制背景可解決此類問題
适合滑屏頁面、單屏頁面
<a href="http://peunzhang.sinaapp.com/demo/pageresponse/pageresponse_contain.html" target="_blank">預覽</a>
保持頁面的寬高比,調整頁面的寬度或高度(較小者),使頁面完全覆寫浏覽器視窗
頁面水準垂直居中,超出浏覽器視窗左右或上下的内容會被隐藏
适合滑屏頁面、單屏頁面,且頁面邊緣無重要内容
<a href="http://peunzhang.sinaapp.com/demo/pageresponse/pageresponse_cover.html" target="_blank">預覽</a>
保持頁面的寬高比,調整頁面的寬度,使頁面寬度完全包含在浏覽器視窗中
<a href="http://peunzhang.sinaapp.com/demo/pageresponse/pageresponse_auto.html" target="_blank">預覽</a>
<a href="http://peunzhang.sinaapp.com/demo/pageresponse/pageresponse_fullpage.html" target="_blank">預覽</a>
meta的viewport設定:
啟用插件代碼示例一:
啟用插件代碼示例二:
<a href="https://github.com/peunzhang/pageresponse" target="_blank">demo下載下傳</a>
歡迎大家使用,插件還有很多的不足,對于複雜的頁面并不合适,具體結合實際項目,任何問題歡迎留言探讨~
祝大家粽子節快樂~
作者:白樹