如何找出适合iPhone的尺寸背景图片

Question

I am working with media queries to create screen breaks, in order to have a website optimized on both the desktop and mobile. Currently, when I bring the site up with its current css the background pictures are stretched out of proportion. (The current background sizes are: 640px x 960px.)

Here is the current css:

@media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-    pixel-ratio : 2) {

    #home{width: 980px;
        height: 1090px;
        background-image: url(../images/landingPageRetina.jpg) 50% 0 no-repeat;
        background-size: 100% 100%;}

    #about{background-image: url(../images/aboutMobile.png) 50% 0 no-repeat;}


    #music{background-image: url(../images/musicMobile.jpg)  50% 0 no-repeat;}

    #videos{background-size: url(..images/videosMobile.jpg)50% 0 no-repeat;}

    #connect{background-image: url(..images/connectMobile.jpg)50% 0 no-repeat ;}

    #contact{background-image: url(../images/contactMobile.jpg)50% 0 no-repeat ;}
}

Does anyone have any suggestions on what the correct sizes are - so that the images will render proportionally?

Answer 1

iPhone5 is 640x1136. Look at this article by smashing magazine for more details: http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/

The best background to use is one that won't require so many media queries in order to make it look good. Try CSS3 gradients or tiled backgrounds...