5

フルページの背景画像を持つ Web サイトを作成しようとしています。デスクトップバージョンで動作するようにgithubなりましたが、携帯電話にプッシュして表示すると、背景画像が上部の長い画像になります。で を使用しbackground-size: coverていcssます。以下のスクリーンショット。モバイルでスペース全体を占有するようにするにはどうすればよいですか? ありがとう ：）

デスクトップ版: デスクトップ版

モバイル版: モバイル版

.background1
 {
 /* Location of the image */
 background-image: url(images/background-photo.jpg);

 /* Image is centered vertically and horizontally at all times */
 background-position: center center;

 /* Image doesn't repeat */
 background-repeat: no-repeat;

 /* Makes the image fixed in the viewpoint so that it doesn't move when 
 the content height is greater than the image height */
 background-attachment: fixed;

 /* This is what makes the background image 
 rescale based on itscontainer's size */
 background-size: cover;

/* Pick a solid background color that will
be displayed while the background image is loading */
background-color:#464646;
}

HTMLは以下の通り

<head>
<script src="https:
//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"</script>
<script
src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"></script>
</head>
<meta charset="utf-8">
<title>Color</title>
<link rel="stylesheet" href="style.css">
<link href="animate.css" rel="stylesheet">
</header>

<body id="bodyID" class="background1">
</body>

<script src="javascript.js"></script>
4

2 に答える 2

9

<body>この問題は、要素がデバイスに合う高さを持っていないことに起因します。height: 100%onを貼り付けることもできますがhtml, body、これを行うより簡単な方法は、次を追加することだと思います。

body {
  height: 100vh;
}

これにより、読み込み時に body 要素の高さがビューポートの高さの 100% に設定されます。これをテストしたところ、Android デバイスで問題が解決され、デスクトップで問題が発生することはありませんでした。

補足: Google の指示に従って、Chrome インスペクタ ツールを使用して Android デバイスをデバッグできます。

于 2016-04-26T19:14:56.910 に答える
0

min-height または max-height または height を定義しましたか? Html コードを共有して確認できるかもしれません。バックグラウンド CSS については、こちらがより便利なコードです。

background: #464646 url(images/background-photo.jpg) no-repeat center center;
background-size: cover;
于 2016-04-26T03:18:11.960 に答える