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

時間 2019-11-06

原文原文鏈接

上一篇文章《爲何選擇iPhone5的分辨率做爲H5視覺稿尺寸》最後留下了問題：是否須要視覺設計師設計多套的視覺稿供給前端工程師作頁面適配呢？按照本身之前的方法，一般會要求設計師設計2套的尺寸，一套是窄屏手機(如iPhone4)，另外一套是寬屏手機(如iPhone5)，這樣的好處不只減小重構頁面的適配成本外，也在頁面展示上提高頁面的用戶體驗。html

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

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

目錄(更新於20151013)

原理及說明

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

github地址

https://github.com/peunzhang/pageResponse ios

真實案例

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

contain模式（推薦）

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

預覽github

cover模式

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

預覽瀏覽器

auto模式（默認模式）

保持頁面的寬高比，調整頁面的寬度，使頁面寬度徹底包含在瀏覽器窗口中前端工程師

預覽框架

結合fullPage滑屏框架的例子

預覽ide

快速上手

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
    })
});