How can I create HTML pages that automatically adjust their images to different mobile screen sizes?

Question

I want to create some HTML pages which will be displayed on different mobile devices. I want them to automatically adjust to different mobile screen sizes.

The HTML page

Answer 1

There are a lot of options here, most far to detailed to talk about in a single question.

There is no 'automatic' way of doing this - it will have to be manually coded. Three options I can think of, which will require more investigation:

1. Use the User-Agent http header to identify the device which is connecting and redirect the user to the required website template.
2. Use JavaScript to do the same as above.
3. Use CSS to control each object's size. You could force each object to be a percent of the overall screen size, rather than a fixed value. CSS also provides a way to specify styles based on a given screen size: http://www.w3.org/TR/css3-mediaqueries/