How To Setup Html For Mobile Devices With An Header-image, That Takes Whole Width Of Browser?

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 resoluti

Solution 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;}<divid="header"><imgsrc="header.png"/></div>

or

#header img {width:100%;padding:0;border:0;outline:0;}<imgsrc="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  href="mobileStylesheet1.css" media="only screen and (max-device width:840px)"/>
<link  href="mobileStylesheet2.css" media="only screen and (max-device width:800px)"/>
<link  href="mobileStylesheet3.css" media="only screen and (max-device width:480px)"/>

And, in those s, defining:

mobileStylesheet1.css

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

mobileStylesheet2.css

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

mobileStylesheet3.css

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

Solution 2:

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

<metaname="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: width=device-width not working in Mobile IE

Solution 3:

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

For example :

<div class="header">
  <imgsrc="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 !

Solution 4:

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