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

Question

Hi,

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

I think the better solution is to have an image + header background color (or image pattern).

For example :

<div class="header">
  <img src="image.png">
</div>

The width/height of image.png is fixed and header class has something like :

.header {
  display:block;
  background-color:#;
  background:url("") repeat;
}

Then it should fit all devices. But if you want something better, maybe you should do a MVC model and have a view for each device (or the most importants ^^)

Good Luck !

Answer 2

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

Answer 3

Identify the phone from Agent string and serve up different images.

Answer 4

In addition to David Thomas' answer, you'll probably need to set the viewport meta tag:

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

Keep in mind that there are additional properties for that particular meta tag, but those two are probably the ones you need.

You can also give width as a pixel value. "device-width" essentially sets the width of the browser viewport to the width of the phone, which is probably what you want. Afterward, a simple 100% width on whatever element should make it fit the phone exactly. You can combine this with David Thomas' @media query answer to actually swap in images that more closely fit the phone so not as much scaling is involved. Most "modern" mobile browsers support the viewport meta tag. (It really depends on what your definition of modern smartphone is.)

See also: http://stackoverflow.com/questions/2044082/widthdevice-width-not-working-in-mobile-ie