Html 文本和div以Chrome为中心，而不是iPod？

我正在为高尔夫计算器创建一个webApp，在我的iPod上测试时，文本和div标签似乎不像Chrome上的那样居中。然而，输入和选择标记是无效的。这是我的html/css

<header>
    <h1>Simple Handicap Calculator</h1>
</header>

<section>
    <input id="score1" class="score" type="tel" value="Score" onfocus="this.value = '';">
    <input id="score2" class="score" type="tel" value="Score" onfocus="this.value = '';">
    <input id="score3" class="score" type="tel" value="Score" onfocus="this.value = '';">
    <div class="rating">Course</div>
    <select id="courseRating" class="select"></select>
    <div class="rating">Slope</div>
    <select id="slopeRating" class="select"></select>
    <div class="calculateButton" onclick="HandicapCalculator.CalculateHandicap();">Tap</div>
    <div id="handicap">Handicap</div>
    <div id="curtain"></div>
</section>

---

如果还有什么我能提供的，请告诉我。对于实时测试版本，ragstudio.com/difficicalculator

适用于android手机。问题也出现在ipad视网膜上。您必须利用媒体查询在手机/iPhone/平板电脑/ipad等上进行响应性设计。在大多数情况下@vishalkin是的。由于这是在%的非固定像素上开发的，因此目标设备的布局将类似。即使您的宽度：x%以%为单位，但像字体大小这样的元素却不是。。这会在你的反应设计中产生冲突。可能是离题了，但你为什么要做浮动：左；宽度：有些东西100%？我不确定那会达到什么效果。

html {
font-size: 1em;
background: #825534;
color: #E6D4A7;
font-family: JosefinSlab;
}
header {
float: left;
width: 100%;
font-size: 32px;
text-align: center;

font-weight: bold;

text-shadow: 1px 1px 1px #36362C;
}
section {
float: left;
width: 100%;
}
section .score {
height: 38px;
width: 50%;
margin: 8px 25% 0 25%;
padding: none;

text-align: center;
font-size: 1.5em;
background: #5D917D;

box-shadow: 1px 1px 1px #36362C;
border: none;
-webkit-appearance: none;
-webkit-box-sizing: content-box;

}

section .rating {
float: left;
width: 50%;
margin: 8px 25% 0 25%;
font-size: 1.5em;
text-shadow: 1px 1px 1px #36362C;
text-align: center;
-webkit-appearance: none;
}
section .select {
float: left;
width: 50%;
margin: 8px 25% 0 25%;
padding: none;

background: #5D917D;
box-shadow: 1px 1px 1px #36362C;

font-size: 1.5em;
text-indent: 40%;
border: none; 
-webkit-box-sizing: content-box;
}

section .calculateButton {
float: left;
height: 50px;
width: 50%;

margin: 8px 25% 0 25%;

background: #A8AD80;
box-shadow: 1px 1px 1px #36362C;

color: #36362C;
font-size: 2em;
line-height: 50px;
text-align: center;
-webkit-box-sizing: content-box;


}
section #curtain {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;

background: #000;
opacity: .6;
}
section #handicap {
float: left;
height: 50px;
width: 70%;

margin: 8px 15% 0 15%;
background: #E6D4A7;
box-shadow: 1px 1px 1px #36362C;

color: #36362C;
font-size: 2em;
line-height: 50px;
text-align: center;
-webkit-box-sizing: content-box;
}