html - 如何正确使用 iPhone4/5 的媒体查询

Question

我正在为 iPhone 开发一个应用程序。现在我有三张图片，我想以正确的方式显示它们。

• 启动画面
• 进入屏幕
• 背景图片

所有这些都是图片()

我必须缩放它们，因为 iPhone < iPhone5 的高度为 960px，而 iPhone ≥ iPhone5 的高度为 1136px。我有 2 张图片，我的代码如下所示 ->

<div data-role="page" id="start">
   <a href="#start1" data-transition="fade">
      <div class="main_pic_splash"></div>
   </a>      
</div>

CSS:

/*iPhone < 5*/
    @media screen and (device-aspect-ratio: 2/3) {
       .main_pic_splash {
         background:url(../img/splash/splash960.png);
         background-size: 320px 480px;
         display: block;
       }
}

/*iPhone 5*/
    @media screen and (device-aspect-ratio: 40/71) {
       .main_pic_splash {
            background:url(../img/splash/splash1136.jpg);
            background-size: 320px 568px;
            display: block;
       }
}

我无法让它工作...我只是没有显示图像。希望你能帮助我，并告诉我，我的错误在哪里:-/。

韩语!

Answer 1

background:url('../img/splash/splash1136.jpg');

你忘了引号