私の敏感なウェブサイトは、モバイルや他のデバイスで完璧に拡張されません。

-2

私はブートストラップ3でレスポンシブなウェブサイトを作った。このウェブサイトは反応的ですが、モバイルやその他のデバイスから見ると完全には拡大しません。ページをリロードすると、最初は正しく表示されますが、ロードが完了すると変更されます。誰かが私が間違っていたアイデアを持っていますか？私の敏感なウェブサイトは、モバイルや他のデバイスで完璧に拡張されません。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title></title> 

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 

    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet"> 

    <link rel="stylesheet" href="styles/main.css"> 

    </head> 
    <body> 
    <section class="main"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 box"> 
      <a href="#" class="img"> 
      <img src="" alt="" class="img-responsive"> 
      <div class="imgoverlay"> 
      <div class="text"></div> 
      </div></a> 
     </div> 

    <!--///////////// POP UP /////////////////////--> 
     <div id="popup1" class="overlay"> 
      <div class="col-md-12 popup"> 
      <div class="col-md-6 col-md-offset-1 iframe"> 
       <iframe src="" frameborder="0" allowfullscreen></iframe> 
      </div> 
      <div class="col-md-4 content"> 
       <h2></h2> 
      <p class="info"></p> 
      </div> 
      <a class="col-md-1 close" href="#">&times;</a> 
      </div> 
     </div> 
     </div> 
    </div>  
    </section> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    </body> 
</html> 

body { 
    padding: 0; 
    border: 0; 
    vertical-align: baseline 
    } 

.main { 
    margin-top: 170px; 
    margin-right: auto; 
    margin-left: auto; 
    margin-bottom: 20px; 
} 

.navbar { 
    min-height: 130px; 
    margin-bottom: 20px; 
} 
.navbar-toggle { 
    margin-top: 25px; 
} 
@media (min-width: 768px) { 
    .navbar-nav.navbar-right:last-child { 
    margin-right: 0; 
    } 
} 

.box { 
padding: 5px; 
margin: 0; 
} 

.img { 
    display: block; 
    position: relative; 
    margin: 0px; 
    z-index: 1; 
} 

.imgoverlay { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

.img:hover .imgoverlay { 
    opacity: 0.75; 
} 

.text { 
    position: absolute; 
    bottom: 0; 
    padding-bottom: 6px; 
    margin: auto auto auto 10px; 
} 

/*///////////POP UP////////*/ 
.overlay { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    visibility: hidden; 
    opacity: 0; 
    z-index: 2; 
} 

.overlay:target { 
    visibility: visible; 
    opacity: 1; 
} 

.popup { 
    margin: 150px auto; 
    position: relative; 
} 

.popup .content { 
    max-height: 30%; 
    overflow: auto; 
}

出典

2017-07-28 Fay

使用メディアは、中括弧内の

@media (min-width: 576px) { ... }

を照会

メディアクエリは、異なるメディアタイプ/デバイスごとに異なるスタイルを定義するために使用されるルールを定義するために使用されるスタイルを定義します。

デバイスの画面の幅が最小で567pxの場合、定義済みのスタイルにレンダリングされます。

出典

2017-07-28 10:23:43 DPS

これはどのようにして質問に答えますか？それは何をするためのものか？あなた自身を説明してください！ – Rob

あなたの答えを編集してください。それをコメントにしないでください。しかし、あなたはまだそれが何をしているのか完全には言いません。 – Rob

私の敏感なウェブサイトは、モバイルや他のデバイスで完璧に拡張されません。

答えて

関連する問題