[[每当我尝试以移动屏幕的形式（例如galaxy s5）检查该网站的元素时，它似乎总是向我返回该网页的“缩放”版本，因此使该网页看起来与不居中。 body标签似乎也不占用被检查元素宽度的100％。
有人可以告诉我我在做什么错吗？
我已经尝试将宽度设置为100％，但没有任何区别
<?php error_reporting(0); ?>
<html>
<head>
<title>Profile Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/editPasswordPage.css">
<link href="../css/headers.css" rel="stylesheet">
<link href="../css/profilev2.css" rel="stylesheet">
<link href="../css/editEmailPage.css" rel="stylesheet">
<link rel="stylesheet" href="../css/forall.css">
</head>
<body>
<header>
<?php
require_once '../db/checkloginstatus.php';
require_once '../db/dbConnection.php';
?>
<nav class="navbar cnav">
<div class="container-fluid">
<div class="navbar-header">
<button onclick="backbutton()" type="button" class="btnimg">
<img class="homebtn" src="../image/home.png" alt="home page picture" />
</button>
<p class="navbar-brand">Edit Email</p>
</div>
</div>
</nav>
</header>
<div class="container" align="center" >
<div id="profile-form">
<?php
$con = open_connection();
$sqlStr = "SELECT NRIC, password, email FROM account WHERE NRIC='" . $_SESSION['NRIC'] . "'";
try {
$result = mysqli_query($con, $sqlStr);
} catch (Exception $ex) {
echo $ex;
}
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$nric = $row['NRIC'];
$password = $row['password'];
$email = $row['email'];
}
} else {
echo "0 results";
}
?>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (!empty($_POST["nemail"])) {
if (!empty($_POST["opassword"]) || !empty($_POST["copassword"])) {
$oPassword = $_POST["opassword"];
$coPassword = $_POST["copassword"];
if ($oPassword != $coPassword) {
$unmatchingPassword = "Your passwords do not match!";
} elseif ($password != $oPassword) {
$incorrectPassword = "Your password is incorrect!";
} else {
// username and password sent from form
$_SESSION['newemail'] = $_POST["nemail"];
if (!filter_var($_SESSION['newemail'], FILTER_VALIDATE_EMAIL)) {
$invalidEmailMsg = "Invalid email format";
} else {
echo "<script type='text/javascript'>";
echo "$(document).ready(function(){";
echo "$('#confirmationModal').modal('show')";
echo "});";
echo "</script>";
}
}
} else {
$emptyPassword = "Please fill in your password!";
}
} else {
$emptyEmail = "Please fill in your email!";
}
}
if (($_POST['confirm'])) {
$sql = "UPDATE account SET email = '" . $_SESSION['newemail'] . "' WHERE NRIC='" . $_SESSION['NRIC'] . "'";
if ($con->query($sql) === TRUE) {
$message = "Email updated succesfully";
echo "<script type='text/javascript'>";
echo "$(document).ready(function(){";
echo "$('#successModal').modal('show')";
echo "});";
echo "</script>";
} else {
$message = "Error updating record" . $con->error;
echo "<script type='text/javascript'>";
echo "$(document).ready(function(){";
echo "$('#successModal').modal('show')";
echo "});";
echo "</script>";
}
}
?>
<div class="imgBlank"></div>
<div class="col-xs-12 myborder" align="center">
<div class="vertical-center">
<form id="myForm" action="editEmailPage.php" method="post">
<img src="../image/698959-icon-114-lock-512.png" height="18" width="18">New Email:<br>
<input class="rounded-textbox" type="text" name="nemail"/>
<p class="error_msg"><?php if (isset($invalidEmailMsg)) {
echo $invalidEmailMsg;
} ?></p>
<p class="error_msg"><?php if (isset($emptyEmail)) {
echo $emptyEmail;
} ?></p>
<br>
<img src="../image/698959-icon-114-lock-512.png" height="18" width="18"> Current Password:<br>
<input class="rounded-textbox" type="password" name="opassword" placeholder="Required.." /><br>
<p class="error_msg"><?php if (isset($unmatchingPassword)) {
echo $unmatchingPassword;
} ?></p>
<p class="error_msg"><?php if (isset($emptyPassword)) {
echo $emptyPassword;
} ?></p>
<p class="error_msg"><?php if (isset($incorrectPassword)) {
echo $incorrectPassword;
} ?></p>
<br>
<img src="../image/698959-icon-114-lock-512.png" height="18" width="18"> Confirm Current Password:<br>
<input class="rounded-textbox" type="password" name="copassword" placeholder="Required.." /><br>
<input class="btn" type="submit" value="Confirm">
</form>
</div>
</div>
</div>
</div>
<div class="footer navbar-fixed-bottom" onclick="backbutton()">
<img src="../image/back.png" id="back-icon">
<p>Back</p>
</div>
<script src="../js/navigationButton.js"></script>
<!-- Modal for error messages -->
<div id="errorModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" align="center">Error</h4>
</div>
<div class="modal-body">
<p><?php echo $errorMsg ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btnmodal btn-default" data-dismiss="modal" onclick="javascript:window.location = 'editEmailPage.php'">Back</button>
</div>
</div>
</div>
</div>
<!-- Modal for success message -->
<div id="successModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" align="center">Success!</h4>
</div>
<div class="modal-body">
<p><?php echo $message ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btnmodal btn-default" data-dismiss="modal" onclick="javascript:window.location = 'profilePage.php'">Ok</button>
</div>
</div>
</div>
</div>
<!--Modal for confirmation message -->
<div id="confirmationModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" align="center">Confirmation</h4>
</div>
<div class="modal-body">
<p> Are you sure you want to change your email? </p>
</div>
<div class="modal-footer">
<form method='post'>
<button class ="pull-left btn-default" type='submit' name='confirm' value='confirm'>Yes</button>
</form>
<button type="button" class="btnmodal btn-default" data-dismiss="modal" onclick="javascript:window.location = 'profilePage.php'">No</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,zh-CN,zh-TW,ms,hi,ta,id'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script src="../js/displayChangeLanguage.js"></script>
<script src="../js/navigationButton.js"></script>
</body>
</html>
CSS
.make-left
{
float:left;
}
.btn-default
{
border-radius:35px;
border:1px solid black;
background-color: #00BCD4;
width:70px;
height:auto;
}
.modal-content
{
margin-top:25vh;
min-height:40vh;
width:100%;
background-color: white;
padding:20px;
border:1px solid #888;
}
.error_msg{
color: red;
}
/*hide google translate*/
#google_translate_element
{
display:none ; /*affects the language dropdown*/
}
.goog-te-combo
{
width:100%;/*sets the size of the dropdown bar //display:none !important;*/
}
.goog-te-banner-frame
{
display: none !important;
}
我希望能够看到整个页面反映在检查的元素中，而无需先缩小或向上或向下滚动
顺便指定您使用的浏览器..您是否尝试过更改浏览器？