(ブラウザ間で) ユーザーのブラウザ ウィンドウに基づいて Web サイトを自動ズームする方法はありますか?
固定アスペクト比の Web アプリがあります。中央の機能 (ビデオ) は常に画面に表示されるようになっているため、このようにする必要があります。スクロール可能なコンテンツには、内部 div のあるサイドバーを使用します。基本的な構造を確認するには、以下のコードまたは次のフィドルを表示してください: http://jsfiddle.net/hkdeA/6/
私は現在これを 1 つのサイズで開発しており、すべてのピクセル データをパーセンテージに変換すること、つまりレスポンシブ デザインを最初に考えました。ブラウザ ウィンドウに基づいて (100% の高さまたは 100% の幅に収まるように) 含まれている div も再計算します。ただし、ほとんどのレスポンシブ デザインとは異なり、ページのすべての要素を均等にスケーリングする必要があります。私にとって、これはまたとないチャンスです。ほとんどのレスポンシブ デザインでは、一部の要素を拡大または縮小したいだけなので、ブラウザーのズームを使用してジョブを実行することはできません。私にとって、すべてが一斉に進むべきです。CSS のすべての行を調べてピクセル値をパーセンテージに変換するのは時間のかかる頭痛の種であり、可能であればブラウザーのズームを利用できることを望んでいました。
ただし、ブラウザーのズーム機能にアクセスし、ブラウザー ウィンドウに合わせて正確な距離をズームする方法はありますか (ブラウザー ウィンドウのアスペクト比に応じて、高さまたは幅のいずれか)。2つのステップが必要になると思います。
ユーザーなしで実際にズーム機能にアクセスできること。
必要なズームを計算できること (私のデザインは固定幅であるため、ブラウザー ウィンドウのサイズを計算し、私のデザインと計算された必要なズーム % を比較することができるため、十分に簡単に思えます)、それをユーザーのブラウザーにプッシュします (私のサイトのみ)。 !)
しかし、それは可能ですか？最初の返信者はノーと言っていました。現在、これを実行できるスクリプトはありませんが、他の誰かが何らかの洞察を持っているかどうかを確認したいと思っていました. すべての助けに感謝します。ありがとう！
<div id="container">
<div id="vid">
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</div>
#container{
background:grey;
width:480px;
height:270px;
float:left;
}
#vid{
background:black;
width:320px;
height:180px;
float:left;
}
#sidebar{
background:blue;
width:160px;
height:180px;
float:right;
}
#foot{
background:yellow;
width:480px;
height:90px;
float:left;
}