【原】pageResponse - 讓H5適配行動裝置全家

標籤：

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

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

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

目錄

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

 

原理及說明

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

github地址

https://github.com/peunzhang/pageResponse 

真實案例

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

contian模式（推薦）

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

預覽

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和高度為504pxwindow.onload = window.onresize = function(){    var page = new pageResponse({        class : ‘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和高度為1008pxwindow.onload = window.onresize = function(){    var page = new pageResponse({        class : ‘page‘,     //模組的類名，使用class來控制頁面上的模組(1個或多個)        mode : ‘contain‘,     // auto || contain || cover         width : ‘640‘,      //輸入頁面的寬度，只支援輸入數值，預設寬度為320px        height : ‘1008‘      //輸入頁面的高度，只支援輸入數值，預設高度為504px    })}

demo下載

 

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

祝大家粽子節快樂~

【原】pageResponse - 讓H5適配行動裝置全家