我无法在 google 上搜索到 iOS5 上的 Safari 以双倍大小渲染网站，与 iOS6 上的 Safari 相当。然而，这正是我使用我的 iOS 模拟器 所看到的。
我的系统是 MacOS 10.7。我目前正在测试iPad2，但似乎我在iPhone4上也遇到了同样的问题。
有人遇到过这样的问题吗？
如何防止这种情况发生？
我可以使用媒体查询检测 iOS5 与 iOS6 吗？
我将所有 CSS 代码放在这里，但是它太大了，无法包含答案:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
display: block;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* -- Main CSS -- */
html, body {
height: 100%;
font-size: 16px;
}
body.IE {
font-family: Verdana,Arial,sans-serif;
}
body.notIE {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.container {
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
}
.container::before, .container::after {
display: table;
line-height: 0;
content: "";
}
.calendar_holder {
margin: 2em auto;
height: 100%;
width: 960px;
}
.calendar {
height: 640px;
position: relative;
border: 2px solid #CCC;
border-radius: 1em;
box-shadow: 0 2px 2px #999, 0 0 1.88em 1.88em #CCC;
}
.calendar h1 {
cursor: default;
padding: 0 1em;
text-align: center;
line-height: 2em;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
text-transform: capitalize;
background-color: rgba(0, 0, 0, 0.1);
border-top-left-radius: inherit;
border-top-right-radius: inherit;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-size: 2.75em;
font-weight: bold;
text-rendering: optimizelegibility;
}
.calendar p {
padding: 1em;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.calendar p.winner {
font-size: 1.5em;
}
.calendar p.winner strong {
color: #2C86C2;
}
.day {
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.25) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,rgba(255,255,255,0.1)), color-stop(100%,rgba(255,255,255,0.25)));
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.25) 100%);
background: -o-linear-gradient(-45deg, rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.25) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.25) 100%);
background: linear-gradient(135deg, rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.25) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#40ffffff',GradientType=1 );
border-radius: 0.25em;
border: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.5), 0 0 1px 1px rgba(150, 150, 150, 0.25) inset;
color: rgba(255, 255, 255, 0.95);
text-align: center;
text-shadow: 0 0 0.188em rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.5), -1px -1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5);
text-transform: uppercase;
padding: 0.188em;
position: relative; /* to keep transforms working */
overflow: hidden; /* to keep transforms working */
width: 100% !important;
height: 100% !important;
}
.day time {
background: -moz-linear-gradient(45deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 20%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(255,255,255,0.25)), color-stop(20%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(45deg, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 20%);
background: -o-linear-gradient(45deg, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 20%);
background: -ms-linear-gradient(45deg, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 20%);
background: linear-gradient(45deg, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 20%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40ffffff', endColorstr='#00ffffff',GradientType=1 );
width: 100%;
height: 100%;
display: block;
border-radius: 0.25em;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
}
.day_holder .day time .date_day {
font-size: 4em;
line-height: 1.1em;
}
.day_holder .day time .date_month {
font-size: 90%;
}
.day_holder {
border-radius: 0.25em;
position: absolute;
-webkit-filter: sepia(25%);
background: none!important;
text-decoration: none!important;
}
.day_holder .day:hover {
background: none;
}
.day_holder .day div {
-webkit-transition: bottom 0.25s ease;
-moz-transition: bottom 0.25s ease-in-out;
transition: bottom 0.25s ease-in-out;
content: 'Click to win!';
font-size: 0.65em;
line-height: 2em;
position: absolute;
width: 95%;
bottom: -2.7em;
}
.day_holder:hover .day div {
bottom: 0;
}
.question_pane {
position: absolute;
background-color: rgba(255, 255, 255, 0.5);
top: 6.35em;
max-height: 86%;
width: 40%;
margin: 0 5%;
min-height: 40%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.75);
overflow-x: hidden;
}
.prize_pane,.sponsor_pane {
position: absolute;
right: 6.05%;
width: 43.95%;
}
.prize_pane {
max-height: 57.75%;
top: 5.625em;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.75);
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
}
.sponsor_pane {
bottom: 2em;
}
.sponsor_pane h2 {
display: none;
}
.calendar h2 {
color: rgba(255, 255, 255, 0.95);
font-size: 1.15em;
background-color: rgba(255, 255, 255, 0.25);
width: 100%;
line-height: 2em;
padding: 0 0.5em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.prize_pane img {
border: 1px solid rgba(0, 0, 0, 0.5);
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
}
.sponsor_pane img {
}
.calendar img {
vertical-align: middle;
}
form {
padding: 0.5em 1em;
}
fieldset legend, fieldset strong {
line-height: 2em;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
font-weight: bold;
color: rgba(0, 0, 0, 0.85);
}
form ul, form ol {
display: inline-block;
margin: 1em 0 0 0;
}
form li {
float: left;
width: 100%;
line-height: 2em;
height: 2em;
margin-top: 0.5em;
}
form ol {
font-size: 0.9em;
margin: 0;
}
form ol li {
line-height: 1em;
height: 1em;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
color: #FF6838;
}
form ul.answers {
margin: 0;
font-size: 0.9em;
max-height: 4.5em;
overflow-x: hidden;
}
form ul.answers li {
margin: 0;
line-height: 1.5em;
min-height: 1.5em;
position: relative;
height: auto;
}
form input[type="radio"] {
float: left;
height: auto;
width: auto;
margin: 0.05em 1em;
}
form label {
width: 40%;
float: left;
line-height: 2em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.5), -1px -1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5);
color: white;
}
form ul.answers label {
line-height: 1.5em;
width: 1.094px;
}
form input {
width: 45%;
float: right;
line-height: 1em;
height: 75%;
margin: 0;
border-radius: 1em;
border: 1px solid rgba(0, 0, 0, 0.5);
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5);
padding: 0.1em 0.75em;
}
form input:focus {
outline: none;
}
form input[type="checkbox"] {
width: auto;
float: left;
height: auto;
margin: 0.6em 1em;
}
form input[type="submit"],.btn-success {
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.75);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
background-color: #71C502;
border: 0;
border-radius: 1em;
color: rgba(255, 255, 255, 0.95);
cursor: pointer;
display: inline-block;
font-family: arial;
font-weight: bold;
height: auto;
padding: 0.5em 1em;
text-shadow: none;
text-decoration: none;
width: auto;
}
form input[type="submit"]:hover, .btn-success:hover {
background-color: #84BB49;
}
.btn-success {
margin: 0.5em 0;
}
form hr {
margin: 1em 0;
display: inline-block;
width: 100%;
border: 0;
background-color: rgba(255, 255, 255, 0.25);
height: 1px;
}
.backlink {
position: absolute;
top: 5em;
left: -1.4em;
}
.backlink a {
text-decoration: none;
color: black;
background-color: rgba(255, 255, 255, 0.8);
font-family: arial;
font-weight: bold;
font-size: 1.5em;
border-radius: 100%;
width: 1.5em;
height: 1.5em;
display: block;
text-align: center;
line-height: 1.6em;
border: 3px solid rgba(0, 0, 0, 0.75);
text-indent: -0.1em;
}
.backlink a:hover {
background-color: rgba(255, 255, 255, 1);
}
/* ----------------- ALL MOBILE ----------------------- */
@media (max-width : 1025px) {
.container, .calendar_holder, .calendar {
height: 100%;
width: 100%;
}
.container {
background: rgb(253,255,255);
background: -moz-linear-gradient(top, rgba(253,255,255,1) 0%, rgba(196,196,196,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,255,255,1)), color-stop(100%,rgba(196,196,196,1)));
background: -webkit-linear-gradient(top, rgba(253,255,255,1) 0%,rgba(196,196,196,1) 100%);
background: -o-linear-gradient(top, rgba(253,255,255,1) 0%,rgba(196,196,196,1) 100%);
background: -ms-linear-gradient(top, rgba(253,255,255,1) 0%,rgba(196,196,196,1) 100%);
background: linear-gradient(to bottom, rgba(253,255,255,1) 0%,rgba(196,196,196,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdffff', endColorstr='#c4c4c4',GradientType=0 );
}
.calendar_holder {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
margin: 0;
}
.calendar {
border: 0;
border-radius: 0;
box-shadow: none;
background-size: cover!important;
background-attachment: fixed!important;
background-repeat: no-repeat!important;
background-position: center center!important;
}
.calendar h1 {
font-size: 1.25em;
margin: 0;
}
form .rememberMe {
width: 80%;
}
.prize_pane {
max-height: none;
border-radius: 0;
box-shadow: none;
}
.prize_pane img {
border: 0;
}
.question_pane, .prize_pane, .sponsor_pane {
position: static;
width: 90%;
margin: 1em 5%;
}
.backlink {
position: fixed;
left: 0.5em;
bottom: 1em;
}
.day_holder {
width: 4em!important;
height: 4em!important;
}
.day_holder {
-webkit-filter: none;
float: left;
position: relative;
top: auto!important;
left: auto!important;
margin: 0.721em;
background-image: none!important;
}
.day {
background-color: rgba(0, 0, 0, 0.25);
}
.day_holder .day time .date_day {
font-size: 2.5em;
}
.day_holder .day time .date_month {
font-size: 0.65em;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}
.day_holder .day div {
display: none;
}
.clearfix {
height: 2em;
float: left;
clear: both;
width: 100%;
}
.calendar form ul.answers {
max-height: none;
overflow-x: visible;
}
.calendar form input[type="radio"] {
width: 5%;
margin: 0.5em 2% 0.5em 0;
}
.calendar form ul.answers label {
width: 90%;
}
}
/* These lines are used for scaling */
/* iPad Retina ----------- */
@media (device-height : 2048px) and (device-width : 1536px) and (-webkit-min-device-pixel-ratio: 2) and (orientation : portrait) {
.calendar {
font-size: 100%;
}
}
/* iPad Retina ----------- */
@media (device-height : 2048px) and (device-width : 1536px) and (-webkit-min-device-pixel-ratio: 2) and (orientation : landscape) {
.calendar {
font-size: 100%;
}
}
/* iPad ----------- */
@media (device-height : 1024px) and (device-width : 768px) and (orientation : portrait) {
.calendar {
font-size: 174%;
}
}
/* iPad ----------- */
@media (device-height : 1024px) and (device-width : 768px) and (orientation : landscape) {
.calendar {
font-size: 167%;
}
}
/* iPhone 5 on iOS5 ----------- */
@media (device-height : 1136px) and (device-width : 640px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
.calendar {
font-size: 91%;
}
}
/* iPhone 5 on iOS5 ----------- */
@media (device-height : 1136px) and (device-width : 640px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
.calendar {
font-size: 37%;
width: 340px;
}
}
/* iPhone 4 ----------- */
@media (device-height : 960px) and (device-width : 640px) and (orientation : portrait) {
.calendar {
font-size: 74%;
}
}
/* iPhone 4 ----------- */
@media (device-height : 960px) and (device-width : 640px) and (orientation : landscape) {
.calendar {
font-size: 147.2%;
}
}
/* iPhone 1-3 ----------- */
@media (device-height : 480px) and (device-width : 320px) and (orientation : portrait) {
.calendar {
font-size: 74%;
}
}
/* iPhone 1-3 ----------- */
@media (device-height : 480px) and (device-width : 320px) and (orientation : landscape) {
.calendar {
font-size: 108%;
}
}
/* iPod ----------- */
@media (device-height : 320px) and (device-width : 240px) and (orientation : portrait) {
.calendar {
font-size: 51%;
}
}
/* iPod ----------- */
@media (device-height : 320px) and (device-width : 240px) and (orientation : landscape) {
.calendar {
font-size: 62%;
}
}
/* hi-res smartphone (Galaxy S3) ----------- todo BECAUSE WE DONT SUPPORT G3, I COMMENT THIS OUT
@media (min-device-width : 40em) and (device-width : 72em) and (orientation : landscape) {
.calendar {
font-size: 100%;
}
}
@media (min-device-width : 40em) and (device-width : 72em) and (orientation : portrait) {
.calendar {
font-size: 100%;
}
}
最佳答案
很确定这是一个元标记问题。
试试这个，它适用于大多数设备:
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
关于ios - 网站在 iOS 6 中正常呈现，但在 iOS 5 iPad 模拟器中呈现双倍大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13934422/