html - ビューポートの高さメタタグ

原文 html css responsive-design breakpoints

次のCSSを適用しました:

@media screen and (max-height: 650px) {
    .about .info{
        bottom: 65px;
    }
}


私のhtmlに書いた

<meta name="viewport" content="width=device-width, initial-scale=1.0">


しかし、ブレークポイントは機能していません。以下を追加しました:

<meta name="viewport" content="height=device-height, initial-scale=1.0">


それも機能しなかったため、"initial-scale=1.0"を削除しましたが、Webページ全体が混乱します。

何かご意見は?

更新

これが画像と情報を追加する私のforeachループです。

<?php $i=0;?>
@foreach($images as $image)
<div class="about">
    <div class="overlay"></div>
    <div class="image" style="background-image:url({{asset('uploads/about/' . $image->path )}})">
        <section class="info right hidden" id="{{$i+1}}">
            <h2>{{$image->title}}</h2>
            <div>{{$image->body}}</div>
        </section>
    </div>
</div>
<?php $i++; ?>
@endforeach


そしてこれが私の完全な<head>です

<!DOCTYPE html>
<html>
    <head>
        <title>Kristal Logistics</title>
        <link rel="icon" type="image/png" href="{{asset('img/favicon.png')}}" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        {{ HTML::style('fonts/fonts.css')}}
        {{ HTML::style('css/reset.css')}}
        {{ HTML::style('css/fullpage.css')}}
        {{ HTML::style('css/animate.css')}}
        {{ HTML::style('css/menu.css')}}
        {{ HTML::style('css/main.css')}}
        {{ HTML::script('js/jquery.js') }}
        {{ HTML::script('js/script.js') }}
        {{ HTML::script("js/modernizr.custom.js")}}
    </head>
    <body>


上記の私のcssコードは、main.cssの最後の行に適用されています。
答え
cssファイルの順序と、ブレークポイントが呼び出される順序を確認してください。私のコメントで述べたように、このjsfiddleは実際の例を示しています。私の例では、

position:absolute;


コンテンツセクションに移動します。これにより、CSSの順序が正しい場合に正しい配置が保証されます。
関連記事

javascript - JavaScript画像のsrc属性が誤った値を返す

javascript - JavaScriptでHTMLチェックボックスをループ

html - Li-IE 10およびChromeのスパン幅の問題

html - iOSでレンジスライダーズームを解決する方法

javascript - JavaScriptを使用して範囲を強調表示できない

html - ブートストラップグリッドが小さい画面幅<768pxで機能しない

javascript - HTMLに解析されたJSONデータの<script>タグのエスケープ/削除

javascript - ドロップダウンに表示される複数のcssファイルからCSSクラスのリストを取得します

javascript - <a>タグが混在するテキストノードをjQueryでラップする方法は?

javascript - 2画像を同時に表示