ウェブページがモバイルブラウザで自動調整されない

私のウェブサイトにログインポップアップをデザインしました。ウェブページがモバイルブラウザで自動調整されない

ラップトップブラウザで正しく整列されて表示されますが、モバイルでは非常に小さく表示されています。モバイルブラウザと互換性のあるブートストラップタグを追加する際にも助けが必要です。以下は

コードのデモンストレーションであるあなたが

重要なメタビューポートタグの欠落

function PopUp(hideOrshow) { 
 
    if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none"; 
 
    else document.getElementById('ac-wrapper').removeAttribute('style'); 
 
} 
 
window.onload = function() { 
 
    setTimeout(function() { 
 
     PopUp('show'); 
 
    }, 1000); 
 
}

#ac-wrapper { 
 
    position: fixed; 
 
    top: 90px; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    /*background: rgba(34,34,34,0.75);*/ 
 
    background: rgba(255, 255, 255, .6); 
 
     /*rgba(255, 255, 255, .6)*/ 
 
    z-index: 1001; 
 
} 
 

 

 

 

 
@import url(http://fonts.googleapis.com/css?family=Roboto);  
 
/****** LOGIN MODAL ******/ 
 
.loginmodal-container { 
 
    max-width: 350px; 
 
    width: 100% !important; 
 
    background-color: #eceff6; 
 
    margin: 0 auto; 
 
    border-radius: 6px; 
 
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); 
 
    overflow: hidden; 
 
    font-family: roboto; 
 
    border:2px solid; 
 
    border-color:rgba(0,0,0,0.5); 
 
} 
 
#popupHeader 
 
{ 
 
    background-color:#3c5899;padding:12px; 
 
    margin-bottom:25px; 
 
} 
 
.loginmodal-container form{padding:35px;} 
 
.loginmodal-container h1 { 
 
    text-align: center; 
 
    font-size: 1.2em; 
 
    margin:0px; 
 
    font-family: roboto; 
 
    color:#fff; 
 
} 
 

 
.loginmodal-container input[type=button] { 
 
    width: 100%; 
 
    display: block; 
 
    margin-bottom: 10px; 
 
    position: relative; 
 
} 
 

 
.loginmodal-container input[type=text], input[type=password] { 
 
    width: 100%; 
 
    padding: 08px 16px; 
 
    margin: 2px 0; 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    border-radius: 06px; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
} 
 

 
.loginmodal-container input[type=text]:hover, input[type=password]:hover { 
 
    border: 1px solid #b9b9b9; 
 
    border-top: 1px solid #a0a0a0; 
 
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); 
 
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); 
 
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); 
 
} 
 

 
.loginmodal { 
 
    text-align: center; 
 
    font-size: 14px; 
 
    font-family: 'Arial', sans-serif; 
 
    font-weight: 700; 
 
    height: 36px; 
 
    padding: 0 8px; 
 
/* border-radius: 3px; */ 
 
/* -webkit-user-select: none; 
 
    user-select: none; */ 
 
} 
 

 
.loginmodal-submit { 
 
    /* border: 1px solid #3079ed; */ 
 
    border: 0px; 
 
    color: #fff; 
 
    text-shadow: 0 1px rgba(0,0,0,0.1); 
 
    background-color: #5e75a7; 
 
    padding: 10px 0px; 
 
    font-family: roboto; 
 
    font-size: 14px; 
 
    margin-top:2px; 
 
    border-radius:4px; 
 
} 
 

 
.loginmodal-submit:hover { 
 
    /* border: 1px solid #2f5bb7; */ 
 
    border: 0px; 
 
    text-shadow: 0 1px rgba(0,0,0,0.3); 
 
    background-color: #6a8acf; 
 
} 
 

 
.loginmodal-container a { 
 
    text-decoration: none; 
 
    color: #666; 
 
    font-weight: 400; 
 
    text-align: center; 
 
    display: inline-block; 
 
    opacity: 0.6; 
 
    transition: opacity ease 0.5s; 
 
} 
 

 
.login-help{ 
 
    font-size: 12px; 
 
    margin-bottom:50px; 
 
} 
 
.login-help a{display:block;text-align:center;}

<!DOCTYPE html> 
 
<html> 
 

 
<script src="JavaScript.js"></script> 
 

 
<link href="StyleSheet.css" rel="stylesheet" /> 
 

 
<script type="text/javascript" src="https://mtbc.formstack.com/forms/js.php/90_day_review_form_copy"></script><noscript><a href="https://mtbc.formstack.com/forms/90_day_review_form_copy" title="Online Form">Employee Self Evaluation form</a></noscript> 
 

 
<div id="ac-wrapper"> 
 

 
    <div id="popup"> 
 
     <center>    
 
      
 
      <div class="modal fade" id="login-modal" tabindex="-1" role="dialog"> 
 
    \t <div class="modal-dialog"> 
 
\t \t \t \t <div class="loginmodal-container"> 
 
        <div class="row" id="popupHeader"> 
 
         <div class="col-xs-12 text"> 
 
          <img src="logo.png" width="80" height="30" align="center"> 
 
    
 
         </div> 
 
        </div> 
 
        <div align="center"> 
 
         <img src="https://scontent.fisb1-1.fna.fbcdn.net/v/t39.2080-6/c0.0.76.76/p75x75/851562_581386735219055_1520422143_n.png?oh=ac209d564ee1a2c80984e673d168272b&amp;oe=5A134903" width="50" class="_3-q3 img"> 
 
         <br/><br/> 
 
         <div style="opacity: 0.5;">Log in to your Facebook account <br> to access formstack</div> 
 
          
 
        </div> 
 
        
 
\t \t \t \t <form> 
 
\t \t \t \t \t <input type="text" name="user" id="UEmail" placeholder="Email address or phone number" required> 
 
       
 
\t \t \t \t \t <input type="password" id="UPass" name="pass" placeholder="Password" required> 
 
        
 

 
\t \t \t \t <input type="button" name="login" class="login loginmodal-submit" value="Login"> 
 
         
 
\t \t \t \t <font size="1.5px"><h1 align="center"> \t <a href="https://www.facebook.com">Create account</a></h1></font> 
 
\t \t \t \t <br> 
 
        
 
        <font size="1.5px"><h1> \t <a href="https://www.facebook.com">Forgetten password?</a></h1></font> 
 
\t \t \t \t </div> 
 

 
      
 
</form> 
 
\t \t \t 
 
</html>

出典

2017-11-12 Asim Liaqat

取り組んで見ることができますスニペット：

<meta name="viewport" content="width=device-width">

何をクリアしませCSS Tricks: Responsive meta tag

出典

2017-11-12 13:35:34 charlietfl

を参照してくださいに特定の問題s。そのページは私に敏感だと思われる – charlietfl

これは私の携帯電話の現在の表示です。 https://ibb.co/h9Z2JG –

あなたの期待が何であるか分かりません – charlietfl

ウェブページがモバイルブラウザで自動調整されない

答えて

関連する問題