iOS5 のSafari が iOS6 の Safari に匹敵する2 倍のサイズで Web サイトをレンダリングすることを Google で検索できませんでした。ただし、これはまさにiOS Simulatorを使用して確認できるものです。
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%;
}
}