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

If the pages you're talking about literally just contain text and images, then I think all you need to do in each HTML page is this:

1. Add this viewport meta tag inside the tag:

   This should make the page render at a reasonable size.

2. Add this

   I think this will make sure all images don't render any wider than the app's webview's viewport.

   (If that doesn't work, try width: 100%; instead. That'll definitely make all images be as wide as the viewport, and therefore no wider.)

However, your question is a bit too general: we could end up writing a book covering all the possibilities. Could you make it more specific to the code you're actually working on?