4

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

1
  • seeing as you want to reduce the 'scaling' (inferred from your response to @Vinzius), have a look at the edit to my answer, and assess whether @media queries might help. Oct 4, 2010 at 12:54

4 Answers 4

7

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;
}
0
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: width=device-width not working in Mobile IE

2

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 !

2
  • No, this is not possible. Its an image, that has to fit. Oct 4, 2010 at 12:41
  • Ok but it will scale the image... so I don't think it's a good solution. However try a width:100% on the image or some kind of JS script to identify screen width.
    – Vinzius
    Oct 4, 2010 at 12:49
0

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

1
  • 2
    I didn't down-vote, but I could imagine that it was because you recommended browser sniffing, which is highly fallible, since browsers don't identify themselves consistently and can actively mis-identify themselves at the users' behest. Object detection is often a more successful way of achieving the same, or similar, end-result. Oct 4, 2010 at 14:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.