ページを動的にスケーリングする最良の方法は？

Question

あなたは、解像度に基づいて動的にウェブサイトを再スケーリングすることが最も効率的であるため、あなたとガルスがお勧めするものは何ですか？

要素と画像を再スケーリングするものはありますか？ これを個別に行う必要はありますか？ 私はパーセンテージとemを使用しようとしてきましたが、それは巨大な手間のようです。スクリプトはありますか？ 私はかなり長い間検索してきましたが、まだまだ合っているものは見つかりませんでした。

Answer 1

新規Media Queriesは、CSS3仕様で指定されています。あなた

マガジン（ exampleでは、ブラウザウィンドウのサイズを変更してみてください） からリストを対象に素晴らしいarticleが離れて読むことができますはもちろんのscriptsを既存しています。

Answer 2

デバイスの向きを検出する最も良い方法は、メタタグを使用することです。ビューポートメタタグは、Webページを表示する方法を決定するために、iPhoneとiPadのSafari/chromeによって使用されます。にこれを追加し、1.0に初期のスケールを設定するには

HTMLファイルの先頭に次の宣言を追加することで、デバイスの幅にビューポート

のプロパティビューポートの幅です

<meta name="viewport" content="width=device-width"> 

に続きHTMLファイルの先頭：

<meta name="viewport" content="initial-scale=1.0"> 

初期のスケールを設定するには、ユーザーのスケーリングをオフにするには、HTMLファイルの先頭に以下を追加：

ビューポートメタタグを使用して、モバイルブラウザの表示を改善します。このメタタグは、ビューポートの幅と初期スケールを設定します。適切なビューポートのメタデータをドキュメントの先頭に追加して、デバイスの画面にできるだけ大きなコンテキストでコンテンツを表示するようブラウザに指示します。ビューポートの幅を設定しないと、最初に読み込まれたときにページがズームアウトされます。

フルスクリーンモード

<meta name="apple-mobile-web-app-capable" content="yes"> 

コンテンツは、Webアプリケーションがフルスクリーンモードで実行されますyesに設定されている場合。そうでなければ、それはしません。 window.navigator.standalone読み取り専用ブールJavaScriptプロパティを使用して、Webページがフルスクリーンモードで表示されるかどうかを判断できます。