css - Webフロントエンドのスケーリング

Question

私はもともとテレビで使用するために設計されたWebレイアウトを持っています（あいまいなブラウザを備えたデバイスから実行されます）。テレビが対応するcssファイルと画像を提供する解像度を検出します。これらのcssシートと画像は、サポートされている3つの解像度（576、720、1080）に合わせて特別にスケーリングされています。

今、私はこれをあなたの標準的なブラウザ（IE、FF、Chrome）で動作させることを試みるという楽しい仕事をしています。これらのブラウザでこれを機能させるために、PCの解像度（1024x768）にスケーリングする方法を考えています。このタスク用に個別のcssシートと画像がないので、JavaScriptを使用してデフォルトのcssシートをその場でスケーリングするか、ブラウザーのズーム（ctrl + / ctrl-）を利用する必要があると思います。後者の提案は肩をすくめたので、私はこれを別の方法でやらなければならないと思います。

問題は、画像がスプライトであり、すべて背景画像であるため、スケーリングが機能するかどうかわからないことです。

誰か提案はありますか？

Answer 1

画面全体を埋める必要がありますか？多くの人は、ブラウザウィンドウを最大サイズよりも小さくしています。

Answer 2

新しいCSSを作成するよりも、JavaScriptを使用してページを再スケーリングする方が（おそらく）時間がかかります。「PCの解像度」は単に1024x768ではなく、流動的であると想定する必要があります。

私のおすすめ。既存のスタイルシートの1つを含めてから、その後に含める新しいスタイルシートを作成して、必要な部分をオーバーライドします。Firefox + Firebugがここで役立つ場合があります。または、WebInspectorを使用するChrome/Safariが役立つ場合があります。

元の質問を超えていますが、テレビベースのメニュー（リモコンで操作されたと思います）を盲目的にWebに移植しようとするのはおそらく悪い考えであり、Web用に再構築するのに時間を費やしたほうがよいかもしれません。 、単に画面に収まるようにするのではありません。