网站在 iOS6 中正常呈现，但在 iOS5 iPad 模拟器中翻倍
Posted
技术标签:
【中文标题】网站在 iOS6 中正常呈现，但在 iOS5 iPad 模拟器中翻倍【英文标题】：Website renders normally in iOS6, but double size in iOS5 iPad Simulator 【发布时间】：2012-12-18 13:48:26 【问题描述】：我无法通过 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%;
【问题讨论】：
我们如何在不看到您的问题代码的情况下为您提供帮助。 更具体地向我们展示您的视口元代码。 朋友们，我已经重写了我的问题 这对我没有帮助***.com/questions/6400698/… 【参考方案1】：很确定这是一个元标记问题。
试试这个，它适用于大多数设备：
<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">
【讨论】：
以上是关于网站在 iOS6 中正常呈现，但在 iOS5 iPad 模拟器中翻倍的主要内容，如果未能解决你的问题，请参考以下文章
将图像添加到 M MessageView 控制器在 IOS5 中可以正常工作，但在 IOS 6 中不能
通过 testflight 将 monotouch 开发的应用程序部署到 ios 6 但在 ios5 上可以