專案中需要做一個數據展示用的看板，初接到任務覺得這個沒有什麼難度，做個漂亮的網頁瀏覽器全屏就可以了。可是實際做的過程中碰見了問題。

第一：瀏覽器不能有橫向和縱向的滾動條，沒有滑鼠的滾動操作過程。

第二：有各類尺寸的屏，除了在九宮格拼接屏上完美顯示，還要同時滿足普通使用者的電腦端顯示。電腦的客戶解析度可能是1399*768或1920*1080等各類尺寸的解析度。

利用傳統網頁製作從上到小的製作方式已經不能滿足需求了。例如：

下面的對比圖：一個是1902*1080 ,一個是1366*768的螢幕，很明顯高解析度的屏顯示的內容多些。

那麼如何做到大屏上內容動態調整適合螢幕展示呢？

響應式媒體查詢、rem,js控制尺寸還是其他方法呢？最開始覺得響應式媒體查詢就可以滿足我的需求，的確是可以精細化控制，可是時間有限，容不得我花費較長時間，而且寫多套尺寸的css 我覺得工作量不少，介面元素一多，要照顧的地方也非常多。js控制也嘗試過，不適合，要resize調整的專案多。總之，糾結了半天。

後來買了一個基礎版的DataV，做了開發，但DataV的可程式設計型不高，要多花費銀子買企業版！最後問題還是迴歸到要H5製作大屏的需求上來。DataV的適屏做的很好，何不借鑑下呢，F12檢視原始碼，看到了body 的scale css屬性，大概就明白了做法，於是乎開工做。原理就是用一個基礎尺寸比如1920*1080來做開發和佈局，最後利用客戶端瀏覽器的尺寸，按一定的計算比例做縮放。

關鍵的程式碼片段：

 var ratio = $(window).height() / 1080;
        console.log(ratio);
        $('body').css({
            transform: "scale(" + ratio + ")",
            transformOrigin: "left top",
            backgroundSize: 100 * (window.screen.width / $(window).width() * ratio) + "%" + ' 100%',
            backgroundPosition: ($(window).width() - $('body').width() * ratio) / 2 + "px top",
            marginLeft: ($(window).width() - $('body').width() * ratio) / 2
        });
 

利用這個原理順利完成了大屏的開發：效果還不錯，暫時沒有碰見坑！

效果如下：把瀏覽器縮到最小：

全屏情況下：