Problems with iPhone 4s rendering the media query properly - iphone

Question

I have been working on this problem for awhile now. I think that I have the proper media query for the iPhone 4s (retina); however, the Safari Mobile will not render my stylesheet correctly. Most of the problem is that the background images are not rendering at all. The size of the background pics (for each section) are 640px x 960px. They are also saved as .jpg files. Here is the stylesheet for the iPhone:
#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;}
}
I have exhausted all my other resources, does anyone have any ideas?