モバイル/タブレットで風景からポートレートに変更するときに空白が付きます

パーソナルプロジェクトで作業しているウェブサイトには、大きな背景画像（全画面）が必要です。ちょうどそのオフスクリーンがコンテナdiv <main>ですこのコンテナのdivは、ユーザーがページの下端に達するまで大きな背景イメージをオーバーレイします<footer>。モバイル/タブレットで風景からポートレートに変更するときに空白が付きます

これは、任意の画面サイズに完璧に動作しますが、唯一の風景ビューに、今私はこれが<main> div要素が100％の身長CSSを持っていることによってちょうどオフ画面表示されるように設定されているという事実によるものである知っています、しかしこれは、ポートレートビューで表示するときに問題を引き起こします。これは、<main> divの右下を画面の下に押して、私が望まない背景画像の下に巨大な空白を残します。

これを解決するにはメディアクエリを実行する必要がありますか（メディアクエリは素晴らしいですが、実際にはエッジをドラッグしてユーザーのサイズ変更画面を考慮していません）、または何か不足しています私のCSSでまたは最終的にそれはjavascript経由で修正することができますか？

詳細情報：、v3.3.7ブートストラップ https://blackrockdigital.github.io/startbootstrap-scrolling-nav/

CSS：

body { 
    width: 100%; 
    height: 100%; 
} 
html { 
    width: 100%; 
    height: 100%; 
} 
/* div holding the background image */ 
.mainbg { 
    background-image: url("../images/main_image.jpg"); 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: 100% auto; 
    height: 100%; 
}

HTML：私は私が与えるためにあなたが十分なコードを掲載しているとは思わない

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 
    <div class="mainbg"></div> 

    <main role="main"> 
     <!-- Intro Section --> 
    <section id="intro" class="intro-section mobile-block"> 
     <div class="container-fluid"> 
      <div class="col-lg-12"> 
       <h1>Stack Overflow Question</h1> 
      </div> 
       <div class="row">

出典

2016-09-05 MartinJJ

「メディアクエリは素晴らしいですが、実際にはエッジをドラッグしてユーザーのサイズ変更画面を考慮していません。最初に、ウィンドウの幅に基づいたメディアクエリは、ウィンドウのサイズを変更するユーザに応答します。次に、ハードウェアの画面サイズのメディアクエリもあります。 –

実際の例ですが、一般的な考え方は、メディアクエリを使用してビューポートの幅に基づいてCSSを変更できるということです。

は、多分それは

@media (max-width: 767px) { /* adjust breakpoint as req'd */ 
    .mainbg { 
    height:75%; /* adjust as req'd, could be % or sometimes pixel value is easier to work with on narrow viewports */ 
    } 
}

のようなもののような単純なものでしたか多分あなたは別のビューポート

@media (max-width: 767px) { 
     .mainbg { 
     .... 
     } 
    }  

@media (max-width: 480px) { 
     .mainbg { 
     ... 
     } 
    }

または時折少し複雑なメディアを対象とする複数のメディア要求を使用する必要がありますlikeのようなクエリ

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
@media only screen and (min-width: 480px) and (max-width: 767px) { 
    .mainbg { 
    ... 
    } 
     }

通常のCSSカスケードルールapあなたのスタイルシートの正しい位置にこれらのルールを入れてください。

は、私はこの問題を解決するためにメディアクエリを実行する必要がありますか？...（私は早くないなどのメディアクエリーが大きいだろうが、彼らは本当にいけないの周りの縁をドラッグして画面のサイズを変更するユーザのアカウント）、またはI午前私の cssに何かが見つからないか、最後にjavascriptで修正できますか？

JavaScriptを使用すると、CSSで解決できる一般的なルールがわかりやすくなります。メディアクエリを使用すると、画面のサイズを変更する際に問題はありません。うまくいきます。

希望すると便利です。

出典

2016-09-05 11:34:24

モバイル/タブレットで風景からポートレートに変更するときに空白が付きます

答えて

関連する問題