- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我无法在 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/
我需要将文本放在 中在一个 Div 中,在另一个 Div 中,在另一个 Div 中。所以这是它的样子: #document Change PIN
奇怪的事情发生了。 我有一个基本的 html 代码。 html,头部, body 。(因为我收到了一些反对票,这里是完整的代码) 这是我的CSS: html { backgroun
我正在尝试将 Assets 中的一组图像加载到 UICollectionview 中存在的 ImageView 中,但每当我运行应用程序时它都会显示错误。而且也没有显示图像。 我在ViewDidLoa
我需要根据带参数的 perl 脚本的输出更改一些环境变量。在 tcsh 中,我可以使用别名命令来评估 perl 脚本的输出。 tcsh: alias setsdk 'eval `/localhome/
我使用 Windows 身份验证创建了一个新的 Blazor(服务器端)应用程序,并使用 IIS Express 运行它。它将显示一条消息“Hello Domain\User!”来自右上方的以下 Ra
这是我的方法 void login(Event event);我想知道 Kotlin 中应该如何 最佳答案 在 Kotlin 中通配符运算符是 * 。它指示编译器它是未知的,但一旦知道,就不会有其他类
看下面的代码 for story in book if story.title.length < 140 - var story
我正在尝试用 C 语言学习字符串处理。我写了一个程序,它存储了一些音乐轨道,并帮助用户检查他/她想到的歌曲是否存在于存储的轨道中。这是通过要求用户输入一串字符来完成的。然后程序使用 strstr()
我正在学习 sscanf 并遇到如下格式字符串: sscanf("%[^:]:%[^*=]%*[*=]%n",a,b,&c); 我理解 %[^:] 部分意味着扫描直到遇到 ':' 并将其分配给 a。:
def char_check(x,y): if (str(x) in y or x.find(y) > -1) or (str(y) in x or y.find(x) > -1):
我有一种情况,我想将文本文件中的现有行包含到一个新 block 中。 line 1 line 2 line in block line 3 line 4 应该变成 line 1 line 2 line
我有一个新项目,我正在尝试设置 Django 调试工具栏。首先,我尝试了快速设置,它只涉及将 'debug_toolbar' 添加到我的已安装应用程序列表中。有了这个,当我转到我的根 URL 时,调试
在 Matlab 中,如果我有一个函数 f,例如签名是 f(a,b,c),我可以创建一个只有一个变量 b 的函数,它将使用固定的 a=a1 和 c=c1 调用 f: g = @(b) f(a1, b,
我不明白为什么 ForEach 中的元素之间有多余的垂直间距在 VStack 里面在 ScrollView 里面使用 GeometryReader 时渲染自定义水平分隔线。 Scrol
我想知道,是否有关于何时使用 session 和 cookie 的指南或最佳实践? 什么应该和什么不应该存储在其中?谢谢! 最佳答案 这些文档很好地了解了 session cookie 的安全问题以及
我在 scipy/numpy 中有一个 Nx3 矩阵,我想用它制作一个 3 维条形图,其中 X 轴和 Y 轴由矩阵的第一列和第二列的值、高度确定每个条形的 是矩阵中的第三列,条形的数量由 N 确定。
假设我用两种不同的方式初始化信号量 sem_init(&randomsem,0,1) sem_init(&randomsem,0,0) 现在, sem_wait(&randomsem) 在这两种情况下
我怀疑该值如何存储在“WORD”中,因为 PStr 包含实际输出。? 既然Pstr中存储的是小写到大写的字母,那么在printf中如何将其给出为“WORD”。有人可以吗?解释一下? #include
我有一个 3x3 数组: var my_array = [[0,1,2], [3,4,5], [6,7,8]]; 并想获得它的第一个 2
我意识到您可以使用如下方式轻松检查焦点: var hasFocus = true; $(window).blur(function(){ hasFocus = false; }); $(win
我是一名优秀的程序员,十分优秀!