【原】pageResponse - 讓H5適配移動設備全家(移動端適配)

上一篇文章《為什么選擇iPhone5的分辨率作為H5視覺稿尺寸》最后留下了問題：是否需要視覺設計師設計多套的視覺稿供給前端工程師做頁面適配呢？按照自己以前的方法，通常會要求設計師設計2套的尺寸，一套是窄屏手機(如iPhone4)，另一套是寬屏手機(如iPhone5)，這樣的好處不僅減少重構頁面的適配成本外，也在頁面展現上提升頁面的用戶體驗。

然而不管是設計2套還是3套以上的視覺稿來輔助前端來完成頁面，最終還是會抵擋不住設備更新換代帶來的適配問題，移動設備不斷從低分辨率到高分辨率過渡，不同分辨率尺寸差異越來越大，適配越來越頭疼。

親，你還在為以上事情煩惱嗎？來~請使用新鮮出爐的pageResponse.js，一套視覺稿適配移動設備全家，讓煩惱通通見鬼去！！！

目錄(更新於20151013)

• 原理及說明
• github地址
• 真實案例
• contain模式（推薦）
• cover模式
• auto模式（默認模式）
• 結合fullPage滑屏框架的例子
• 快速上手

 

原理及說明

• 使用transform:scale縮放頁面，要求視覺稿高清
• 頁面以px為單位即可讓h5適配各種移動設備，適配原則根據視覺稿比例縮放頁面
• 兼容性良好，支持ios4+、android2.3+、winphone8+系統
• 大小1k，零依賴
• 三種適配模式可選 auto || contain || cover

github地址

https://github.com/peunzhang/pageResponse 

真實案例

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

contain模式（推薦）

• 保持頁面的寬高比，調整頁面的寬度或高度（較大者），使頁面完全包含在瀏覽器窗口中
• 頁面水平垂直居中，左右或上下可能出現空白，頁面背景使用純色或可復制背景可解決此類問題
• 適合滑屏頁面、單屏頁面

預覽

cover模式

• 保持頁面的寬高比，調整頁面的寬度或高度（較小者），使頁面完全覆蓋瀏覽器窗口
• 頁面水平垂直居中，超出瀏覽器窗口左右或上下的內容會被隱藏
• 適合滑屏頁面、單屏頁面，且頁面邊緣無重要內容

預覽

auto模式（默認模式）

保持頁面的寬高比，調整頁面的寬度，使頁面寬度完全包含在瀏覽器窗口中

預覽

結合fullPage滑屏框架的例子

預覽

快速上手

meta的viewport設置：

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

啟用插件代碼示例一：

<div class="page">
    <img src="img/demo1.jpg" alt="" width="320" height="504">
    <h1>你一定也有過一個翱翔天際的夢1</h1>
    <p>-  回家，或踏上旅途，飛機是自由的符號  -</p>
</div>

//視覺稿尺寸是640px*1008px，頁面樣式是以視覺稿尺寸除以2來計算，那么輸入頁面的寬度為320px和高度為504px
window.onload = window.onresize = function(){
    pageResponse({
        selectors: '.page',     //模塊的類名，使用class來控制頁面上的模塊(1個或多個)
        mode : 'contain',     // auto || contain || cover 
        width : '320',      //輸入頁面的寬度，只支持輸入數值，默認寬度為320px
        height : '504'      //輸入頁面的高度，只支持輸入數值，默認高度為504px
    })
}

啟用插件代碼示例二：

<!-- 2個模塊（包含隱藏的）都包含class:page，pageResponse可對這2個模塊起作用 -->
<div class="page">
    <img src="img/demo1.jpg" alt="" width="640" height="1008">
    <h1>你一定也有過一個翱翔天際的夢1</h1>
    <p>-  回家，或踏上旅途，飛機是自由的符號  -</p>
</div>

<div class="page hide">
    <p>是否還記得她</p>
    <img src="img/logo.jpg" alt="" width="40" height="40">
    
</div>

 

//視覺稿尺寸是640px*1008px，頁面樣式是以視覺稿原始尺寸來計算，那么輸入頁面的寬度為640px和高度為1008px
window.onresize = function(){
    pageResponse({
        selectors: '.page',     //模塊的類名，使用class來控制頁面上的模塊(1個或多個)
        mode : 'contain',     // auto || contain || cover 
        width : '640',      //輸入頁面的寬度，只支持輸入數值，默認寬度為320px
        height : '1008'      //輸入頁面的高度，只支持輸入數值，默認高度為504px
    })
}
document.addEventListener("DOMContentLoaded", function() {
    pageResponse({
        selectors: '.page',     //模塊的類名，使用class來控制頁面上的模塊(1個或多個)
        mode : 'contain',     // auto || contain || cover 
        width : '640',      //輸入頁面的寬度，只支持輸入數值，默認寬度為320px
        height : '1008'      //輸入頁面的高度，只支持輸入數值，默認高度為504px
    })
});

 

demo下載

 

歡迎大家使用，插件還有很多的不足，對於復雜的頁面並不合適，具體結合實際項目，任何問題歡迎留言探討~

祝大家粽子節快樂~