為移動設備縮放 html 頁面
[英]Scaling html page for mobile
問題描述
我想讓我的 html 頁面在打開它的移動屏幕上縮放。 這是我的代碼。 我已經添加了初始比例 1 行，但它似乎不起作用。 我希望輸入框和單選按鈕的圖像隨着打開頁面的設備的寬度和高度進行縮放。 我正在使用 html/css 和 bootstrap 來制作頁面和一些 JavaScript。
<!DOCTYPE html>
<html lang="en">
<head>
<img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345">
<script>
function myFunc() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corendon WI-FI</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
H1 { text-align: center }
.bs-example{
margin: 20px;
}
body {
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -35%);
}
input, textarea {
max-width:100%
};
img {
max-width: 100%
};
</style>
</head>
<body onload="myFunc();">
<div class="bs-example">
<div class="bs-example">
<form>
<div class="form-group">
<label for="inputticketnummer">Ticketnummer</label>
<input type="ticketnummer" class="form-control" id="inputticketnummer" maxlength="20" placeholder="ticketnummer" size="" required>
</div>
<input type="checkbox" id="checkme"/> Ik heb de <a href="agreements" class="button">voorwaarden</a> gelezen </label>
<br><br>
<input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
</form></div></form>
</div>
</div>
</body>
</html>
3 個解決方案
解決方案1
0 2015-11-25 11:11:06
為了使用 Bootstrap 獲得適當的頁面縮放，您必須為頁面設置網格系統。 現在，Bootstrap 無法綁定任何東西，因此無法對其進行擴展。
看看文檔： http : //getbootstrap.com/css/#grid
解決方案2
0 2015-11-25 11:23:09
更正您的代碼，如以下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function myFunc() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corendon WI-FI</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
H1 { text-align: center }
.bs-example{
margin: 20px;
}
/*body{
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -35%);
}*/
input, textarea {
max-width:100%;
}
img {
max-width: 100%;
}
</style>
</head>
<body onload="myFunc();">
<div class="container">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345">
</div><!--col-sm-12-->
</div><!-- row -->
<div class="row">
<div class="col-sm-12" onload="myFunc();"></div>
</div><!-- row -->
<div class="row">
<div class="col-sm-12 bs-example">
<div class="col-sm-12">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
</div><!-- col-sm-12 -->
<div class="col-sm-12">
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
</div><!-- col-sm-12 -->
<div class="col-sm-12">
<div class="form-group">
<input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
</div>
</div><!-- col-sm-12 -->
</div><!-- col-sm-12 bs-example -->
</div><!-- row -->
</div><!-- container -->
</body>
</html>
首先，在使用引導程序時始終使用引導程序類。 其次，不要在 css 中使用 transform 屬性並在 css 中固定位置。
解決方案3
0 2015-11-25 11:54:50
您的標記有幾個錯誤。 您可以使用引導程序類來解決此問題，但也可以免費使用並根據需要使用它們。
為此替換您的 CSS 代碼：
.form{
max-width: 400px;
padding: 15px;
margin: 0 auto;
}
img{
margin: 0 auto;
}
.row{
margin-bottom:10px
}
並為此替換您的標記：
<body onload="myFunc();">
<div class="container">
<div class="form">
<div class="row">
<img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345">
</div>
</div>
<form class="form">
<div class="row">
<label for="inputticketnummer">Ticketnummer</label>
<input type="ticketnummer" class="form-control" id="inputticketnummer" maxlength="20" placeholder="ticketnummer" size="" required>
</div>
<div class="row">
<input type="checkbox" id="checkme"/> Ik heb de <a href="agreements" class="button">voorwaarden</a> gelezen
</div>
<div class="row">
<input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
</div>
</form>
</div>
</body>
頁面無法縮放以適合移動設備上的視口
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.