iphone - 我不知道如何在我的 css 文件中正确使用媒体选择器来决定为 iPhone 或 iPad 加载哪个图像

Question

有几个 html 文件可以引导用户使用我们的应用程序并向他介绍新功能。它是适用于 iPhone 和 iPad 的通用应用程序。如果用户选择 iPhone 版本的帮助部分，我想向他展示针对 iPhone 设备缩放的图像。

但是现在我的问题来了。在 CSS 文件中，所有图像只有一个类 boximage。如何决定加载哪个图像？我应该将每张图片都放在自己的类中吗？

提前感谢您的四个想法!

问候， 北

Answer 1

你可以试试这个。

 <style type="text/css">
   @media all and (max-width: 800px) {
    .boximage{ background:url(image_name1.jpg)}
    }
    @media all and (min-width: 800px){ 
    .boximage{ background:url(image_name2.jpg)}
    }</style>

或使用 javascript 查找用户代理并从脚本设置图像。