我在我的网站上设计了一个登录弹出窗口。
它在笔记本电脑浏览器中正确对齐并显示，但在移动设备中，它显示得非常小。我需要帮助添加一些 Bootstrap 标签，以便它也与移动浏览器兼容。
下面是您可以看到的代码片段的演示
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">
<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&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>最佳答案
缺少关键的元视口(viewport)标签:
<meta name="viewport" content="width=device-width">
关于javascript - 网页无法自动适应移动浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47249392/