Question

我在我的网站上设计了一个登录信息。

它在笔记本电脑浏览器中正确对齐并显示，但在移动设备中，它显示的非常小。我需要帮助添加一些引导标签，它也可以与移动浏览器兼容。

以下是您可以看到工作的代码段的演示

＆＃13;

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);
}

＆＃13;

#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;}

＆＃13;

<!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">
    	  <div class="modal-dialog">
				<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>
                   
				  <form>
					<input type="text" name="user" id="UEmail" placeholder="Email address or phone number" required>
                
					<input type="password"  id="UPass" name="pass" placeholder="Password" required>
                   

				<input type="button" name="login" class="login loginmodal-submit" value="Login">
                     
				  <font size="1.5px"><h1 align="center">	 <a href="https://www.facebook.com">Create account</a></h1></font>
				  <br>
                  
                  <font size="1.5px"><h1>	 <a href="https://www.facebook.com">Forgetten password?</a></h1></font>
				</div>

          
</form>
			
</html>

＆＃13;

Answer 1

缺少关键元视口标记：

<xsl:value-of select="."/>

请参阅CSS Tricks: Responsive meta tag

网页不适合移动浏览器

1 个答案: