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