レスポンシブなWebデザインのクロスブラウザー互換性をテストする方法

レスポンシブWebデザインの重要なポイント（RWD）

レスポンシブWebデザイン（RWD）は、さまざまな画面サイズのデバイスでWebサイトにアクセスしやすくユーザーフレンドリーであることを確認するために不可欠です。 2010年にEthan Marcotteによって提案され、画面のサイズやビューポートのサイズに関係なく、単一のWebサイトがあらゆるデバイスで適切に動作できるようになりました。

RWDは、HTMLビューポートメタタグ、メディアクエリ、CSSビューポートユニット、CSS列、CSSフレックスボックスとグリッド、JavaScript RWDオプションなど、さまざまな手法と方法を使用します。これらはすべて優れたブラウザーサポートを備えており、CSSグリッドは現在、一般的に使用されるブラウザーのほぼ95％によってサポートされています。

RWDおよびクロスブラウザーの互換性のテストは重要であり、ブラウザ内テスト、モバイルオペレーティングシステムシミュレーター、オンラインテストサービス、現実世界のデバイステストで行うことができます。ただし、各方法には独自の制限があり、最も正確な結果を得るために組み合わせて使用​​する必要があります。

オンラインテストサービス（LambDateStなど）により、ユーザーはWeb上のモバイルブラウザーでレスポンシブページをテストできます。これらのサービスには、スタイルの回帰または破損したユーザーインターフェイスをチェックするための自動テストAPIも含まれます。

実際の処理速度、タッチコントロール、および全体的な設計を評価できるため、RWDをテストするための最も正確な方法は、

実際のデバイステストです。できるだけ多くのデバイス、特に1年または2年使用されてきた一般的なデバイスでテストすることをお勧めします。

rwd

での作業方法 単一のRWDメソッドや手法はありません。

最初に、Webサイトのデザインがさまざまなサイズのモニターにどのように反応するかを判断する必要があります。これは課題であり、多くの初期のRWD Webサイトが既存のデスクトップレイアウトを取得し、画面サイズを縮小してコンテンツの一部を削除します。

より良いテクノロジーは「モバイルファースト」です。これは、すべてのデバイスで実行される線形モバイルビューから始まり、より多くのスペースとサポートされているブラウザー機能が利用可能な場合、コンテンツを再配置または調整します。最近、多くのウェブサイトがよりシンプルなレイアウトを採用しており、モバイルとデスクトップのエクスペリエンスがほとんど似ています。

RWDの典型的な例は、ハンバーガーメニューです。小規模な画面にいるユーザーは、アイコンをクリックしてナビゲーションリンクを表示できますが、大型画面のユーザーは水平リストのすべてのオプションを表示できます。

次のセクションでは、いくつかの技術的な実装オプションを提供します。

html viewportメタタグ

どのRWDテクノロジーを使用しても、次のタグをHTMLで設定する必要があります。

設定では、モバイルブラウザが画面幅に論理的なCSSピクセルをスケーリングすることを確認します。この設定がなければ、ブラウザはデスクトップWebサイトをレンダリングし、それに応じてスケーリングしていると想定して、パンとスケーリングを可能にします。

<code class="language-html"><meta name="viewport" content="width=device-width, initial-scale=1"></code>

width=device-widthメディアクエリ

メディアクエリは、初期のRWD Webサイトの主な基礎でした。 CSSは、特定の範囲のビューポートサイズをターゲットにすることができます。たとえば、

<code class="language-html"><meta name="viewport" content="width=device-width, initial-scale=1"></code>

メディアクエリはまだ使用されていますが、現在はあまり明示的ではありません。

<picture></picture>要素

html<picture></picture>要素は、メディアクエリの構文を使用して複数から制御するために使用します。 <img src="https://img.php.cn/upload/article/000/000/000/173915575374245.jpg" alt="How to Test Responsive Web Design Cross-Browser Compatibility "> cssビューポートユニット

cssユニット

および

は、それぞれビューポートの幅と高さの1％を表します。 vwは最小サイズの1％であり、vhは最大サイズの1％です。 vmin vmaxこれらは、特に

と組み合わせて使用​​する場合、RWDの柔軟性を可能にします。たとえば、

calc

<code class="language-css">/* 应用于所有视图的样式 */
p {
  font-size: 1rem;
}

/* 应用于宽度介于 900px 和 1200px 之间的视口的样式 */
@media (min-width: 900px) and (max-width: 1200px) {
  p {
    font-size: 1.5rem;
  }
}</code>

css列

CSSマルチコラムレイアウトは、コンテナサイズが大きくなるにつれて複数のテキスト列を作成する方法を提供します。たとえば、

<code class="language-css">/* 字号随视口宽度增加而增加 */
p {
  font-size: 1rem + 0.5vw;
}</code>

css flexboxおよびgrid

CSS FlexBoxとCSSグリッドは、コンテンツと利用可能なスペースに基づいて子要素をレイアウトするための最新のテクノロジーを提供します。主な違いは次のとおりです

FlexBoxは、1次元レイアウトに使用されます。必要に応じて要素を壊す（または壊れていない）可能性があるため、列が揃っていない場合があります。

グリッドは2次元レイアウトで使用され、通常は認識可能な行と列があります。

両方を使用して、「本質的なレイアウト」（ジェンシモンズによって発明された用語）を作成できます。基本的に、要素のサイズは、メディアクエリのないビューポートのサイズに基づいて決定されます。たとえば、

javascript rwd options

<code class="language-css">/*
列的最小宽度必须为 12rem
每个列之间有 2rem 的间隙
*/
.container {
  columns: 12rem auto;
  column-gap: 2rem;
}</code>

JavaScriptを使用して、ビューポートのサイズを決定し、それに応じて反応することもできます。たとえば、 同様に、

および

を使用して単一の要素のサイズをチェックできますが、

メソッドはピクセルの小数部を含むより多くの情報を返すことができます：

<code class="language-css">/*
子元素将至少为 20rem 并填充行。
小于 20rem 的显示将子元素大小调整为 1fr
(可用宽度的 100%)。

1rem 的间隙将始终围绕元素。
*/
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1rem;
}</code>

offsetWidthデバイスが回転するか、ブラウザウィンドウがサイズ変更されると、ウィンドウと要素のサイズが変更される場合があります。 offsetHeightAPIはCSSメディアクエリを解析し、変更をトリガーできます：getBoundingClientRect()

<code class="language-javascript">// 获取视口宽度和高度
const vw = window.innerWidth, vh = window.innerHeight;</code>

ブラウザサポートmatchMedia

<code class="language-javascript">const element = document.getElementById('myelement'),
      rect = element.getBoundingClientRect(),
      ew = rect.width,
      eh = rect.height;</code>

上記のRWDテクノロジーはすべて、優れたブラウザのサポートを備えています。最新のオプションであるCSSグリッドは、現在、一般的に使用されるブラウザーのほぼ95％によってサポートされています。ただし、さまざまなデバイス、解像度、ブラウザでWebサイトをテストする必要があります...

（次のコンテンツはスペースによって制限されます。アウトラインのみが保持されます。特定のコンテンツについては、元のテキストを参照してください）

in-browserテスト

モバイルオペレーティングシステムエミュレータ

• オンラインテストサービス（lambdatestなど）
• 実際の機器テスト
• 1つのWebサイト、複数のビュー
レスポンシブWebデザインとクロスブラウザー互換性に関するFAQ
この改訂された出力は、文を言い換え、同義語を使用して擬似オリジナリティを実現します。

以上がレスポンシブなWebデザインのクロスブラウザー互換性をテストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。