-1

私は wordpress サイトを持っており、現在サイトの応答性に取り組んでいます。ランドスケープ モードで表示すると、サイトは問題なく表示されます。しかし、向きが縦向きモード (垂直) に変更されると、サイト上のさまざまなウィジェットが壊れたり、右端に途切れたりします。

ただし、ポートレート (垂直) モードでページを更新すると、すべてのウィジェットが正常に表示され、サイトは一般的に正しくレンダリングされます。CSS/JS が読み込まれていないか、更新が完了するまで向きの変更を検出できないようです。

ユーザーが縦向きモードで適切なビューを取得するために再読み込みすることを期待できません。すべての CSS/JS をリロードする方法や、向きの変更時にページを自動更新する方法はありますか?

<head>タグに追加するために次のことを提案したスレッドに出くわしました

 <meta name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

私はWordpressの初心者なので、これをどこにどのように追加すればすべてのページがこの効果を発揮するのかわかりません. また、上記が機能するかどうか、または他に試してみることができるかどうかもわかりません。

この問題を解決する方法がわからないので、どんな提案も歓迎します。

よろしくお願いします

4

2 に答える 2

2

注: この質問は重複しています。主な質問からの回答の要点をここに再投稿します。

  window.addEventListener('orientationchange', function () {
    var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display');
    document.body.style.display='none';
    setTimeout(function () {
      document.body.style.display = originalBodyStyle;
    }, 10);
  });

このコードは、orientationchange イベントbodyをリッスンし、要素を非表示にして 10 ミリ秒後に表示することで、要素のリフローを強制します。<meta>タグやメディアクエリには依存しません。

追加を提案する回答は<meta name="viewport" content="width=device-width, initial-scale=1.0">機能しません。ここにデモがあります。どのように機能しないかを確認するには、iPad をランドスケープ モードで開始し、ページをロードしてから回転させます。flexbox をずっと使用しているにもかかわらず、ページが最大の高さまで拡大されないことに注意してください。

これを、本番環境でボディの非表示/表示テクニックを使用するこのページと比較してください。

于 2015-07-11T12:51:10.127 に答える