レスポンシブメディアクエリデザイン

ウェブマスターレベル：中/高

データを扱うのが好きです。 ウェブサイトに関する分析情報の調査には多くの時間を費やしています。 これにも関心のあるWeb開発者は、モバイルデバイスからのトラフィックが最近増加していることに気付いているはずです。 過去1年で、スマートフォンやタブレットからのメインサイトのページビューの割合が大幅に増加しました。 これは、HTML、CSS、およびJavaScriptの最新バージョンをサポートする最新のブラウザーでデバイスを使用する訪問者が増えていることを意味します。 ただし、このようなデバイスの画面の幅は通常320ピクセルに制限されています。



製品の可用性を高める、つまり、すべてのユーザーに最適な機会を提供するよう努めています。 サイトの特別なモバイルバージョンを作成するか、既存のサイトと新しいプロジェクトをデスクトップコンピューターとモバイルデバイスの両方で表示するように調整するというジレンマに直面しました。 サイトの2つのバージョンを作成すると、特定の機器用にそれぞれを最適化できますが、1つの共通サイトを使用すると、標準URLを保存できます。 これにより、複雑なリダイレクトが排除され、Webアドレスの共有が簡素化されます。 保守性は重要な要素であるため、異なるバージョンのページを作成しないことにしましたが、次の条件を満たしていることを確認する方法について考え始めました。

1. 画面上のページの表示を任意の解像度でクリアします。
2. 任意のデバイスでコンテンツのグループを表示する機能。
3. ウィンドウサイズに関係なく、水平スクロールバーはありません。

コンテンツ、ナビゲーション、画像スケールの場所を変更する-Chromebook

実装

まず、コンテンツのセマンティックマークアップにより、必要に応じてページの再レイアウトが簡素化されます。 スタイルシートを使用して、 ラバーレイアウトを作成しました。 これが目標への第一歩です。 コンテナのwidth



属性の代わりに、 max-width



を指定し始めました。 height



属性はmin-height



属性に置き換えられ、大きなフォントまたは複数行のテキストがコンテナの境界に違反しないようになりました。 固定幅の画像がゴムの列を壊さないように、次のCSSルールが適用されます。

 img { max-width: 100%; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ラバーモックアップは良いアイデアですが、このレイアウトの使用にはいくつかの制限があります。 幸いなことに、 メディアクエリは 、IE9 +やモバイルデバイスの主要部分のブラウザーを含むすべての最新ブラウザーでサポートされるようになりました。 これにより、特定のインターフェイスに最適化されているため、モバイルブラウザでの表示品質が低下しないサイトを作成できます。 ただし、最初にWebサーバーが考慮するスマートフォンの機能を決定する必要があります。

表示エリア

ピクセルがピクセルではないのはいつですか？ スマートフォンの場合。 通常、スマートフォンのブラウザーは高解像度のデスクトップブラウザーを模倣しているため、モニター画面のようにページが表示されます。 それが、拡大なしでは読めない小さなテキストで「ブラウズモード」が現れた理由です。 標準のAndroidブラウザーのデフォルトのビューポート幅は800ピクセルであり、iOSブラウザーでは画面上の実際の物理ピクセル数に関係なく、980ピクセルです。



ブラウザをより読みやすいモードに切り替えるには、viewportメタ要素を使用する必要があります。

 <meta name="viewport" content="width=device-width, initial-scale=1">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モバイルデバイスには多くの画面解像度がありますが、ブラウザによって報告される標準のデバイス幅は通常、約320ピクセルです。 モバイルデバイスの画面幅が640物理ピクセルの場合、幅320ピクセルの画像は画面の幅全体にスケーリングされ、処理には2倍のピクセルが使用されます。 したがって、デスクトップコンピューターと比較して、2倍のピクセル密度により、小さな画面でより鮮明な表示が得られます。



device-widthがビューポートメタタグのwidth要素の値として指定されている場合、ユーザーがスマートフォンまたはタブレットの画面の向きを変更すると、この値が更新されることが重要です。 メディアクエリと組み合わせて、この関数を使用すると、デバイスを回転させるときにページレイアウトを変更できます。

 @media screen and (min-width:480px) and (max-width:800px) { /* Target landscape smartphones, portrait tablets, narrow desktops */ } @media screen and (max-width:479px) { /* Target portrait smartphones */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サイトがどのように機能し、さまざまなデバイスの画面に表示されるかに応じて、異なるコントロールポイントを使用する必要があります。 この機能がサポートされている場合 、ピクセル単位のアスペクト比を考慮せずにメディアクエリを使用して特定の方向を選択することもできます。

 @media all and (orientation: landscape) { /* Target device in landscape mode */ } @media all and (orientation: portrait) { /* Target device in portrait mode */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンテンツの配置と画像のスケール- 文化研究所

メディアクエリの例

最近、 Googleについてのページの新しいバージョンをリリースしました。 タブレットやスマートフォンなどの小さな画面を持つデバイスのユーザーがこのページで作業しやすくするために、ラバーレイアウトに加えて、いくつかのメディアクエリをコードに追加しました。



特定の画面解像度に焦点を合わせる代わりに、比較的広範囲のコントロールポイントを設定します。 画面の解像度が1024ピクセルを超える場合、ページは元の形式で12列のグリッドに表示されます。 801〜1024ピクセルの場合、ラバーレイアウトのおかげで、わずかに圧縮されたバージョンのページが表示されます。



画面の解像度が800ピクセル未満の場合のみ、ページの下部に非コアコンテンツが表示されます。

 @media screen and (max-width: 800px) { /* specific CSS */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最新のメディアクエリはスマートフォン向けです。

 @media screen and (max-width: 479px) { /* specific CSS */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この瞬間から、大きな画像のダウンロードが停止します。 コンテンツのブロックは上下に配置されます。 また、コンテンツ要素間に余分なスペースを追加して、セクションをより明確に描写しました。



これらの簡単なトリックにより、さまざまな種類のデバイスで表示するためにサイトを最適化することができました。



コンテンツの場所の変更、大きな画像の削除-Google について

おわりに

サイトをモバイルデバイスや狭い画面のデバイスで表示するのに便利な簡単なソリューションはないことを理解することが重要です。 ゴムのモックアップは出発点として適していますが、その使用にはいくつかの制限があります。 メディアクエリはサイトの最適化にも役立ちますが、このテクノロジをまだサポートしていないコンピューターブラウザーを使用してサイトにアクセスする場合 、 25％のケースで忘れてはなりません。 このようなリクエストの存在は、パフォーマンスに影響します。 また、マウスで使用するのに便利なウィジェットがサイトにある場合、正確なアクションを実行するのがより困難なタッチスクリーンでも便利であるという事実はまったくありません。



開発の初期段階でテストを開始することが非常に重要であり、将来的にテストを停止しないことが重要です。 スマートフォンやタブレットでサイトを閲覧するとき、時間を無駄にしません。 実際のデバイスでサイトをテストする機会がない場合は、 Android SDKまたはiOSシミュレーターを使用してください。 友人や同僚に、自分のデバイスからサイトにアクセスして、動作を確認するように依頼します。



モバイルデバイス向けのWebサイトの最適化は、さらに多くの訪問者を惹きつけます。 さらに、そのような最適化のための最良の方法の研究と開発は、専門的な開発の新しい機会を開きます。



Googleのレスポンシブウェブデザインの他の例：

• www.google.com/about/?hl=en
• www.google.com/goodtoknow/
• www.google.com/culturalinstitute
• www.google.com/intl/en/chrome/devices
• picasa.google.com

著者： Rupert Breyeni 、 Edward Jung 、 Matt Zurrer 、Googleウェブマスターチーム。