1

私はしばらくの間、この問題に取り組んできました。iPhone 4s (retina) 用の適切なメディア クエリがあると思います。ただし、Safari Mobile は私のスタイルシートを正しくレンダリングしません。問題のほとんどは、背景画像がまったくレンダリングされないことです。背景画像のサイズ (セクションごと) は 640px x 960px です。また、.jpg ファイルとして保存されます。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;}
}

他のすべてのリソースを使い果たしました。誰かアイデアはありますか?

4

0 に答える 0