How to setup HTML for mobile Devices with an header-image, that takes whole width of browser?

Question

my concern is that I have to build a website for mobile devices. In the concept is an image set as header.

The problem is now: Different smartphones have different display resolutions.

There are e.g. 840x560, 480x320 or 800x480.

What do I have to write as meta-tags, css, etc. to fit the image in "every" modern smartphone to the display?

I hope my concern was clearly described.

Thanks, Chris

Answer 1

Because width: 100%; seems to be well supported I'd suggest either:

#header {
    width: 100%;
    padding: 0;
    margin: 0;
}
#header img {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
}


<div id="header">
    <img src="header.png" />
</div>

or

#header img {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
}

<img src="header.png" />

setting just the width means that the image's width/height ratio will be preserved by the browser. Bear in mind, though, that passing off image manipulation (the scaling/resizing) to the phone's browser might result in less-than pretty artefacts being introduced.

If you have the option of using different sizes of images, you can call those using @media queries:

<link rel="stylesheet" href="mobileStylesheet1.css" media="only screen and (max-device width:840px)"/>
<link rel="stylesheet" href="mobileStylesheet2.css" media="only screen and (max-device width:800px)"/>
<link rel="stylesheet" href="mobileStylesheet3.css" media="only screen and (max-device width:480px)"/>

And, in those stylesheets, defining:

mobileStylesheet1.css

#header {
background: transparent url(path/to/840pxImage.png) 0 50% no-repeat;
}

mobileStylesheet2.css

#header {
background: transparent url(path/to/800pxImage.png) 0 50% no-repeat;
}

mobileStylesheet3.css

#header {
background: transparent url(path/to/480pxImage.png) 0 50% no-repeat;
}