Geek Answers Handbook

How do I customize HTML for mobile with a title that spans the entire width of the browser?

I am concerned that I need to create a website for mobile devices. The concept has an image defined as a title.

The problem is that different smartphones have different display resolutions.

There are, for example, 840x560, 480x320 or 800x480.

What do I need to write as meta tags, css, etc. to match the image on "every" modern smartphone on the display?

I hope that my concern has been clearly described.

Thank you, Chris

+4
source share
4 answers

Since width: 100%; seems to be well supported, I would 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 only width means that the width / height ratio of the image will be saved by the browser. Remember, however, that transferring images (zooming / resizing) to your phone’s browser may result in less significant artifacts.

If you have the ability to use images of different sizes, you can call them 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 these style sheets, 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; }
+7
source

In addition to David Thomas's answer, you 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 this particular meta tag, but you probably need these two.

You can also specify the width as a pixel value. "device-width" essentially sets the width of the browser to the width of the phone, which is probably what you need. After that, a simple 100% width on any element should exactly match the phone. You can combine this with the response to the @media query from David Thomas to actually exchange images that more closely match the phone, so not so much scaling is involved. Most “modern” mobile browsers support the browsing meta tag. (It really depends on what the definition of a modern smartphone is.)

See also: width = device-width not working in Mobile IE

+4
source

I think the best solution is to have a background color + image header (or image template).

For instance:

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

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

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

Then it should match all devices. But if you need something better, maybe you should make an MVC model and have an idea for each device (or for most importers ^^)

Good luck

+2
source

Identify the phone from the agent string and execute various images.

0
source

More articles:


All Articles