解像度に依存しないウェブサイト？ （または、「ウェブサイト全体をブラウザに埋め込むためにスケールする」）

Question

私は本当にスクリーン全体を埋めることから利益を得ることになるプロジェクトに取り組んでいます - それは本質的に7000pxの長いページであり、 5つまたは6つの異なるセグメント/エリア/スライド（基本的には「コンテンツエリア」）を使用して、スクロールダウンしながら、別々の部分に細断され、最終バージョンではインテリジェントな順番でロードされます。上部に

は、デザインの全体の横幅を埋めるナビゲーションバーです。その下に、バックグラウンドでは、バックグラウンド上の特定の位置に配置されたさまざまな要素がたくさんあります。各要素はページの特定のセクションに固有であるため、背景の配置は重要です。

それは本当に有用であろうhttp://windyroad.org/2007/05/18/resolution-independent-web-design/ような何かをやって私には思えます。悲しいかな、それは2007年のことであり、何よりも概念実証に似ています。さらに、誰かがブラウザウィンドウのサイズを変更するたびにPHPを使って1000x7000pxイメージのサイズを変更することは悪い考えです（さらに悪いことに、5つの1000x1000イメージ！）。

私は、ブラウザ全体を埋めるために背景画像を拡大縮小jQueryのスクリプトを使用しますが、ページ上のすべての要素をスケールするものに出会ったことがありません。

動的にブラウザウィンドウに合わせてWebサイト全体を拡張する方法はありますか？

は、私はすでに答えを知っているかなり確信しているが、私はちょうど誰かがアイデアを持っている場合にはそこにそれを投げるはずと考えました。

多くの感謝！

Answer 1

は、スクリプトもcalculate the scrollbar size必要であれば。 ラッパー IDを持つブロック（div、spanなど）が必要です。

これは、ブラウザをクロスブラウザです。それはすべての最新のブラウザをサポートしています。

私はあなたがそれを好きですように願っています。お気軽にご利用ください！

// DONT FORGET TO ADD THIS TO YOUR WRAPPER'S CSS BLOCK 
// THIS WILL KEEP YOUR SITE CENTERED 
// IF YOU USE margin-left:auto; margin-right:auto; 

// transform-origin: 50% 0%; 
// -ms-transform-origin: 50% 0%; 
// -moz-transform-origin: 50% 0%; 
// -webkit-transform-origin: 50% 0%; 
// -o-transform-origin: 50% 0%; 

function FitToScreen(FitType) 
{ 
    var Wrapper = document.getElementById('wrapper'); 

    var ScreenWidth = window.innerWidth; 
    var ScreenHeight = window.innerHeight; 

    var WrapperWidth = Wrapper.offsetWidth; 
    var WrapperHeight = Wrapper.offsetHeight + 200; 

    var WidthRatio = parseFloat(ScreenWidth/WrapperWidth); 
    var HeightRatio = parseFloat(ScreenHeight/WrapperHeight); 

    var ScaleRatio = 1.0; 

    if (FitType == 'width') 
    { 
     ScaleRatio = WidthRatio; 
     if(ScaleRatio * WrapperHeight > ScreenHeight) 
     { 
      ScaleRatio = parseFloat(ScreenWidth/(WrapperWidth + GetScrollBarWidth() -1)); 
     } 
    } 
    else if (FitType == 'height') 
    { 
     ScaleRatio = HeightRatio; 
     if(ScaleRatio * WrapperWidth > ScreenWidth) 
     { 
      ScaleRatio = parseFloat(ScreenHeight/(WrapperHeight + GetScrollBarWidth() -1)); 
     } 
    } 

    var ScaleText = 'scale(' + ScaleRatio.toString().replace(',','.') + ')'; 

    //Chrome and Safari 
     Wrapper.style.webkitTransform = ScaleText; 
    //Firefox 
     Wrapper.style.MozTransform = ScaleText; 
    //Internet Explorer 
     Wrapper.style.msTransform = ScaleText; 
    //Opera 
     Wrapper.style.OTransform = ScaleText; 
    //Standard 
     Wrapper.style.transform = ScaleText; 
} 

function GetScrollBarWidth() 
{ 
    var inner = document.createElement('p'); 
    inner.style.width = '100%'; 
    inner.style.height = '200px'; 

    var outer = document.createElement('div'); 
    outer.style.position = 'absolute'; 
    outer.style.top = '0px'; 
    outer.style.left = '0px'; 
    outer.style.visibility = 'hidden'; 
    outer.style.width = '200px'; 
    outer.style.height = '150px'; 
    outer.style.overflow = 'hidden'; 
    outer.appendChild (inner); 

    document.body.appendChild (outer); 
    var w1 = inner.offsetWidth; 
    outer.style.overflow = 'scroll'; 
    var w2 = inner.offsetWidth; 
    if (w1 == w2) w2 = outer.clientWidth; 

    document.body.removeChild (outer); 
    return (w1 - w2); 
}