iPhone 4s正确呈现媒体查询时出现问题
我研究这个问题已经有一段时间了。我认为我对iPhone4S(视网膜)有合适的媒体查询;但是,Safari Mobile无法正确呈现我的样式表。大多数问题是背景图像根本没有渲染。背景图片的大小(每个部分)为640像素x 960像素。它们还保存为.jpg文件。以下是iPhone的样式表:iPhone 4s正确呈现媒体查询时出现问题,iphone,ios,css,media-queries,Iphone,Ios,Css,Media Queries,我研究这个问题已经有一段时间了。我认为我对iPhone4S(视网膜)有合适的媒体查询;但是,Safari Mobile无法正确呈现我的样式表。大多数问题是背景图像根本没有渲染。背景图片的大小(每个部分)为640像素x 960像素。它们还保存为.jpg文件。以下是iPhone的样式表: @media (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (-webkit-min-device-pixel-
@media (min--moz-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2/1),
(-webkit-min-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) {
/* Home Section */
#home{width: 100%;
height: 480px;
background-image: url(../images/landingPageRetina.jpg) 50% 0 no-repeat;
background-size: 320px 480px;}
#navbar{display: none;}
#albumCover{width: 250px;
height: 250px;
margin-top: 175px;}
#albumCover p{font-size: 5em;}
/* About Section */
#about{width: 100%;
height: 480px;
background-image: url(../images/aboutRetina.jpg) 50% 0 no-repeat;
background-size: 320px 480px;}
.info{width: 260px;
height: 260px;
margin: 100px 0 0 100px;}
.headline{font-size: 2em;
margin: -20px 0 5px 0;}
.info p{padding-top: 30px;
font-size: .875em;
margin-bottom: -100px;}
/*Music Section */
#music{width: 100%;
height: 480px;
background-image: url(../images/musicMobile.jpg) 50% 0 no-repeat;
background-size: 320px 480px;
position: fixed;}
.info ul li{text-align: center;
font-family: eb-garamond, sans-serif;
font-size: 1.5em;
line-height: 2em;
text-transform: capitalize;}
/* Lighthouse */
iframe{width: 50%;
height: 50%;}
#close{margin: 50px 0 15px 350px;
padding: auto 5px;}
/*Videos Section */
#videos{width: 100%;
height: 480px;
background-size: url(..images/videosMobile.jpg);
background-size: 320px 480px;}
/*Connect Section */
#connect{width: 100%;
height: 480px;
background-image: url(..images/connectMobile.jpg);
background-size: 320px 480px;}
/*Contact Section */
#contact{width: 100%;
height: 480px;
background-image: url(../images/contactMobile.jpg);
background-size: 320px 480px;}
#email a{font-size: .625em;}
.primeLine{font-size: 1em;}
#email li{margin: 0;}
}
我已经用尽了所有其他资源,有人有什么想法吗