我不知道如何正确使用CSS文件中的媒体选择器来确定要为iPhone或iPad加载的图像

Question

there are several html files to guide the user through our app and to introduce him to new features. It is a universal app for iPhone and iPad. If the user selects the help section for the iPhone version, i want to show him images scaled for the iPhone device.

But now there is my problem. In the CSS file there is only one class boximage for all the images. How is it decided which image to load? Should i stuck each image in its own class?

Thanks in advance four your ideas!

Regards, buk

Answer 1

You can try this.

 <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>

or Use javascript to find the user-agent and set the image from script.