CODEWITHSUNDEEP
htmlcss
spike.y
spike.y

Reputation: 399

Complex media queries, no javascript and no unnecessary downloading of images

I have this layout:

enter image description here for a desktop/landscape site. And I want it to scale well on a mobile device BUT at the same time I don't want the site to look like crap so I want to change the content slightly so it more closely fits in with the size of a mobile device/smartphone sized screen.

So I came up with this:

enter image description here

In the landscape picture, the 5 boxes in the middle are divs, and each div contains a Picture and a Title (that links to another page). These 5 boxes are the main navigation.

In the Portrait layout (for smartphone devices or just any screen that fits that size), there is only 1 pic, and it is not the pic that is displayed on landscape view or on desktop pc's.

We can't use JavaScript for this site, so I am wondering how I would make such dramatic changes to this layout using media queries.

I know I can just include the massiv pic even on the landscape view but only choose to display it on the mobile version, but I don't want to download unnecessarily.

Is there a way to solve this?

Upvotes: 1

Views: 50

Answers (2)

AndiPower
AndiPower

Reputation: 853

Ok, this should give you the idea:

<div id="massive-pic"></div>

@media all and (min-width: 601px) {
    #massive-pic {
        display:none;
    }
}
@media all and (max-width: 600px) {
    #massive-pic {
        background-image:url('images/massive-pic-mobile.png');
        width:100%;
        height:600px;
    }
}

You can't insert the images in the HTML directly, otherwise the image will be downloaded allways! Even if you set it to display:none. So you need to insert the images with css as a background image.

Upvotes: 2

AndiPower
AndiPower

Reputation: 853

In the Portrait layout (for smartphone devices or just any screen that fits that size), there is only 1 pic, and it is not the pic that is displayed on landscape view or on desktop pc's.

That's not possible with server side scripting alone, because info like device width won't get send to the server.

However you can try to detect mobile and other devices accessing the user-agent and other header information. If you use PHP, you could use something like that: https://github.com/serbanghita/Mobile-Detect/

Upvotes: 1

Related Questions