最近、私の友人が、X テーマを使用して構築した WordPress サイトについて助けを求めて私に連絡してきました。彼のクライアントは、彼の Web サイトが彼の iPhone で正しく表示されていないことに気付いた後、その朝彼に電話をかけてきました。ニックが自分でチェックしたところ、彼が設計した美しいレスポンシブ デザインはもはや機能していませんでした。
彼は、デスクトップでブラウザ ウィンドウのサイズを変更すると、サイトは反応するのに、iPhone ではデスクトップ バージョンしか表示されないという事実にさらに戸惑いました。サイトがデスクトップ コンピューターでは応答し、モバイル デバイスでは応答しないのはなぜですか?
レスポンシブ デザインが機能しない理由
レスポンシブ デザインは、HTML ファイルのヘッダーに 1 行のコードが欠けていると機能しなくなります。この 1 行のコードが欠けていると、iPhone、Android、およびその他のモバイル デバイスは、表示している Web サイトがフルサイズのデスクトップ サイトであると見なし、viewport のサイズを調整します。画面全体を囲むようにします。
ビューポートとビューポート サイズとはどういう意味ですか?
すべてのデバイスで、ビューポートのサイズは、現在ユーザーに表示されている Web ページの領域のサイズを指します。幅 320 ピクセルの iPhone 5 を持っていると想像してください。特に明記しない限り、iPhone は、アクセスするすべての Web サイトが幅 980 ピクセルのデスクトップ サイトであると想定します。
想像上の iPhone 5 を使用して、幅 800 ピクセルのデスクトップ用に設計された Web サイトにアクセスします。レスポンシブ レイアウトがないため、iPhone では全幅のデスクトップ バージョンが表示されます。
いいえ、ちがいます。ビューポート サイズでは、スケーリングが関係する場合があります。 Web ページの全幅バージョンを表示するには、iPhone をズームアウトする必要があります。ビューポートは、現在ユーザーに表示されているページの領域を指すことに注意してください。 iPhone ユーザーは現在、ページの 320 ピクセルしか表示していませんか、それとも全幅バージョンを表示していますか?
そうです: iPhone がデフォルトの動作であると想定しているため、ディスプレイに全幅の Web ページが表示されています: ズームアウトされているため、ユーザーは幅 980 ピクセルまでの Web ページを表示できます。したがって、iPhone のビューポートは 980px です。
ズームインまたはズームアウトすると、ビューポートのサイズが変わります。前に、架空の Web サイトの幅が 800 ピクセルであると述べたので、iPhone を拡大して Web サイトの端が iPhone のディスプレイの端に触れるようにすると、ビューポートは 800 ピクセルになります。 iPhone はデスクトップ サイトで 320 ピクセルのビューポートを持つことができますが、そうすると、そのごく一部しか表示されません。
レスポンシブ Web サイトが壊れています。どうすれば修正できますか?
答えは、Web ページのヘッダーに挿入されたときに、デバイスにビューポートを独自の幅 (iPhone 5 の場合は 320px) に設定し、スケーリングしないように指示する HTML の 1 行です。 (またはズーム) ページ。
このメタ タグに関連するすべてのオプションの技術的な議論については、tutsplus.com のこの記事を参照してください。
WordPress X テーマが応答しない場合の修正方法
前の友人に戻る: この 1 行のコードは、彼が X テーマを更新したときに消えてしまいました。自分のものを修正するときは、X テーマが使用するヘッダー ファイルは 1 つだけではないことに注意してください。スタックごとに異なるヘッダー ファイルを使用するため、自分で編集する必要があります。
Nick は X テーマの Ethos スタックを使用しているため、x /frameworks/views/ethos/wp-header にあるヘッダー ファイルに前述のコード行を追加する必要がありました。php 。別のスタックを使用する場合は、スタックの名前 (Integrity、Renew など) を「ethos」に置き換えて、正しいヘッダー ファイルを見つけます。その一行を挿入すれば出来上がり！準備万端です。
それで、これで私の CSS メディア クエリも修正されますか?
HTML ファイルのヘッダーにその行を挿入すると、レスポンシブ @media クエリが突然再び機能し始め、Web サイトのモバイル バージョンが復活します。お読みいただきありがとうございます。お役に立てば幸いです!
Payette Forward を忘れないでください、David P.
