Javascript 为什么我的UI在iPhone上向上滚动？
我正在创建一个相当简单的JavaScript应用程序，它使用MVC并使用jQuery逐步引导用户通过一系列屏幕，以Javascript 为什么我的UI在iPhone上向上滚动？,javascript,jquery,ios,css,iphone,Javascript,Jquery,Ios,Css,Iphone,我正在创建一个相当简单的JavaScript应用程序，它使用MVC并使用jQuery逐步引导用户通过一系列屏幕，以.show（）和.hide（）显示每个视图所需的元素。在浏览器和iPad上都能很好地工作，但在iPhone上，第四个视图显示为向下滚动的屏幕，这样顶部的栏就看不见了。这里是风景 选择训练 输入重量 展示台 输入权重td:n子项（2）{ 背景色：#dd0； } tr：第一个孩子{ 背景色：#444； 颜色：#fff； 文本转换：大写； /*字体大小：.9em*/ } tr:第一个孩子>
.show（）.hide（）<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WorkoutCalc</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<style>
* {
padding: 0;
margin: 0;
}
body {
font-size: 1.4em;
}
body, textarea, input {
font-family: 'Muli', sans-serif;
background-color: #fff;
/*background-color: #cfc;*/
}
strong, b, h1 {
font-family: 'Montserrat', sans-serif;
}
#wrapper {
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
form {
padding-top: 50px;
padding-bottom: 20px;
}
input {
/*border: none;*/
text-align: right;
font-size: 1.2em;
width: 3em; // don't need this if input is text, only for number
}
input:focus {
outline: none;
}
table, #weightReps, #weightSelect {
display: inline-block;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
}
td {
padding: 0 20px;
}
td:nth-child(2) {
font-family: 'Montserrat', sans-serif;
font-size: 1.6em;
background-color: #ff0;
}
tr {
background-color: #ddd;
}
tr:nth-child(odd) {
background-color: #fff;
padding: 0;
}
tr:nth-child(even) > td:nth-child(2) {
background-color: #dd0;
}
tr:first-child {
background-color: #444;
color: #fff;
text-transform: uppercase;
/*font-size: .9em;*/
}
tr:first-child > td:nth-child(2) {
background-color: #330;
color: #ff0;
}
#header {
background-color: #009;
color: #fff;
}
h1 {
text-align: left;
padding: 10px;
max-width: 800px;
margin-left:auto;
margin-right: auto;
}
#status {
float:right;
margin: 18px;
text-transform: uppercase;
font-size: 1.6em;
}
p {
font-size: 1.8em;
}
table {
font-size: 1.4em;
}
#selectWorkout, #workout {
margin-top: 50px;
width: 100%;
}
#weigthSelect {
/*display: inline-block;*/
}
#weightSelect, #weightReps, #doneExercise {
margin-right: auto;
margin-left: auto;
}
.button {
display: inline-block;
text-align: center;
text-transform: uppercase;
/*display: inline-block;*/
background-color:#009;
color: #fff;
border-radius: 10px;
padding: 20px 30px;
margin: 20px;
cursor: pointer;
}
#doneButton {
background-color: #090;
padding: 50px 30px;
border-radius: 100px;
}
.wide-button {
display: block;
}
@media screen and (max-width: 600px) {
body {
font-size: 1em;
}
#selectWorkout, #workout {
margin-top: 10px;
}
#header {
font-size: .8em;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var model = {
// currentWorkout: null,
// currentExercise: 'sq',
// workWeight: 230,
currentExerciseWeights: [],
storeExercise: [],
// currentExerciseSets: [],
// currentExerciseReps: [],
calculateSets: function() {
console.log('calculateSets');
switch(this.currentExercise) {
case 'sq':
this.currentExerciseSets = [2, 1, 1, 1, 3];
this.currentExerciseReps = [5, 5, 3, 2, 5];
this.currentExerciseWeights[0] = 45;
this.currentExerciseWeights[1] = Math.floor(this.workWeight * .08) * 5;
this.currentExerciseWeights[2] = Math.floor(this.workWeight * .12) * 5;
this.currentExerciseWeights[3] = Math.floor(this.workWeight * .16) * 5;
this.currentExerciseWeights[4] = this.workWeight;
break;
case 'bp':
this.currentExerciseSets = [2, 1, 1, 1, 3];
this.currentExerciseReps = [5, 5, 3, 2, 5];
this.currentExerciseWeights[0] = 45;
this.currentExerciseWeights[1] = Math.floor(this.workWeight * .1) * 5;
this.currentExerciseWeights[2] = Math.floor(this.workWeight * .14) * 5;
this.currentExerciseWeights[3] = Math.floor(this.workWeight * .18) * 5;
this.currentExerciseWeights[4] = this.workWeight;
break;
case 'dl':
this.currentExerciseSets = [2, 1, 1, 1];
this.currentExerciseReps = [5, 3, 2, 5];
this.currentExerciseWeights = [];
this.currentExerciseWeights[0] = Math.floor(this.workWeight * .08) * 5;
this.currentExerciseWeights[1] = Math.floor(this.workWeight * .12) * 5;
this.currentExerciseWeights[2] = Math.floor(this.workWeight * .17) * 5;
this.currentExerciseWeights[3] = this.workWeight;
break;
case 'sp':
this.currentExerciseSets = [2, 1, 1, 1, 3];
this.currentExerciseReps = [5, 5, 3, 2, 5];
this.currentExerciseWeights[0] = 45;
this.currentExerciseWeights[1] = Math.floor(this.workWeight * .11) * 5;
this.currentExerciseWeights[2] = Math.floor(this.workWeight * .14) * 5;
this.currentExerciseWeights[3] = Math.floor(this.workWeight * .17) * 5;
this.currentExerciseWeights[4] = this.workWeight;
break;
case 'pc':
this.currentExerciseSets = [2, 1, 1, 1, 5];
this.currentExerciseReps = [5, 5, 3, 2, 3];
this.currentExerciseWeights[0] = 45;
this.currentExerciseWeights[1] = Math.floor(this.workWeight * .11) * 5;
this.currentExerciseWeights[2] = Math.floor(this.workWeight * .14) * 5;
this.currentExerciseWeights[3] = Math.floor(this.workWeight * .17) * 5;
this.currentExerciseWeights[4] = this.workWeight;
break;
}
for (var i = 0; i < this.currentExerciseWeights.length; i ++) {
if (this.currentExerciseWeights[i] < 45) {
this.currentExerciseWeights[i] = 45;
}
}
view.workoutView();
},
currentExerciseName: function() {
switch (this.currentExercise) {
case 'sq': return 'Squat';
case 'bp': return 'Bench Press';
case 'dl': return 'Deadlift';
case 'sp': return 'Press';
case 'pc': return "Power Clean";
}
},
nextExercise: function() {
if (this.currentWorkout == 'sqBpDl') {
switch (this.currentExercise) {
case 'sq':
this.currentExercise = 'bp';
break;
case 'bp':
this.currentExercise = 'dl';
break;
case 'dl':
this.currentExercise = 'done';
}
} else {
switch (this.currentExercise) {
case 'sq':
this.currentExercise = 'sp';
break;
case 'sp':
this.currentExercise = 'pc';
break;
case 'pc':
this.currentExercise = 'done';
}
}
}
} // end of model
var view = {
workoutSelectView: function() {
$('#workout').hide();
$('#selectWorkout').show();
$('#doneExercise').hide();
$('#doneWorkout').hide();
},
weightInputView: function() {
window.scrollTo(0, 0); //resets the view on iPhone
$('#selectWorkout').hide();
$('#workout').show();
$('#weightSelect').show();
$('#weightInput').focus();
$('#weightReps').hide();
$('#doneExercise').hide();
$('#status').html(model.currentExerciseName());
},
workoutView: function() {
$('#weightInput').blur();
var setsTable = $('<table id="weightRepsTable"><tr><td>Sets</td><td>Weight</td><td>Reps</td></tr></table>');
for (var i = 0; i < model.currentExerciseSets.length; i ++) {
setsTable.append($('<tr><td>' +
model.currentExerciseSets[i] + '</td><td>' +
model.currentExerciseWeights[i] + '</td><td>' +
model.currentExerciseReps[i] + '</td></tr>'));
}
$('#weightReps').html(setsTable).show();
$('#weightSelect').hide();
$('#doneExercise').show();
},
doneWorkoutView: function() {
$('#selectWorkout').hide();
$('#workout').hide();
$('#weightSelect').hide();
$('#weightReps').hide();
$('#doneExercise').hide();
$('#status').hide();
$('#doneWorkout').show();
console.log(model.storeExercise);
}
}
var controller = {
initializeEvents: function() {
// workout select screen
$('#sqBpDl').click(function() {
model.currentWorkout = 'sqBpDl';
model.currentExercise = 'sq';
controller.doWorkout();
});
$('#sqSpPc').click(function() {
model.currentWorkout = 'sqSpPc';
model.currentExercise = 'sq';
controller.doWorkout();
});
// weight entry screen
$('#calculateWeightsButton').click(function() {
var weight = $('#weightInput').val();
console.log(weight);
if (weight > 0 && weight < 2000) {
model.workWeight = weight;
$('#weightInput').val(null);
model.calculateSets();
}
});
// weight display screen
$('#doneButton').click(function() {
model.storeExercise.push({
exercise: model.currentExercise,
weight: model.workWeight,
complete: model.weightOk
});
model.nextExercise();
if (model.currentExercise == 'done') {
view.doneWorkoutView();
} else {
view.weightInputView();
}
});
$('#backButton').click(function() {
$('#weightInput').val(model.workWeight);
view.weightInputView();
});
// universal
// hitting the 'return' key will trigger whichever button has
// the class 'default-button' AND is visible
$(window).keypress(function (event) {
if (event.which == 13) {
$('.default-button:visible').click();
}
});
},
doWorkout: function() {
view.weightInputView();
},
selectWorkout: function() {
view.workoutSelectView();
}
}
$(function() {
var test = false;
if (test) {
controller.initializeEvents();
$('#doneWorkout').hide();
model.currentWorkout = 'sqBpDl';
model.currentExercise = 'sq';
controller.doWorkout();
model.workWeight = 240;
model.calculateSets();
} else {
controller.initializeEvents();
controller.selectWorkout();
}
});
</script>
</head>
<body>
<div id="header">
<div id="status"></div>
<h1>Warmup Calc</h1>
</div>
<div id="wrapper">
<div id="selectWorkout">
<div class="wide-button button" id="sqBpDl">Squat · Bench Press · Deadlift</div>
<div class="wide-button button" id="sqSpPc">Squat · Press · Power Clean</div>
</div>
<div id="workout">
<div id="weightSelect">
<p>
<input id="weightInput" size="5" step="5" min="45" max="2000"type="number" > lbs.
</p>
<div class="button default-button" id="calculateWeightsButton">GO</div>
</div>
<div id="weightReps"></div>
<div id="doneExercise">
<div class="button" id="backButton">< BACK</div>
<div class="button default-button" id="doneButton">DONE</div>
<!-- <div class="button" id="doneOuchButton">DONE: !!</div> -->
</div>
</div>
<div id="doneWorkout">
<p>Done!</p>
</div>
</div>
</body>
</html>