Menu
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 pages include text and images. The images may be bigger than 600x450, but if the mobile screen is (for example) 280x320 then the images should automatically adjust their size to fit.
How can I do this?
507
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:
Add this viewport meta tag inside the <head> tag:
<meta name="viewport" content="width=device-width">
This should make the page render at a reasonable size.
Add this <style> tag inside the <head> tag:
<style>
img {
max-width: 100%;
}
</style>
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?
119
This technique is known as fluid or adaptive layout there's a good introduction here
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
