1

I'm working on a semi-responsive web design that adapts (has responsive behaviour) to any screen width above 480px. However, my layout can't adapt to fit a screen width under 480px. Below that point, I would like the mobile device to work its magic and zoom out the page content (scale it down) so it fits the device width without the need for horizontal scrolling.

I've read both Android and IOs documentation on the ViewPort meta tag and tried many different combinations. The code below will let the layout responsive behaviour "work" when above 480px and then it will zoom out to fit screen width when below 480p, as expected.

<meta name="viewport" content="width=480">

However, if zoom is applied by the user it will save that state for the current mobile browser window and horizontal scrolling will be shown and will not go away unless the user manually zoom out. It won't reset to the expected zoom even if the user reloads the page. At least, that's the behaviour when tested on iPhone. I don't know where to test it for different Android resolutions.

<meta name="viewport" content="width=480, initial-scale=1">

If I add initial-scale, as seen above, the zoom will reset when the page reloads, but since its set to 1 it won't scale down to fit the device width without horizontal scrolling. Instead, it will have 100% width (480px) and show horizontal scrolling on screens under that resolution.

I would like to understand more about ViewPort meta tag behaviour on different devices based on its attributes so I can be sure to have the results I expect in all devices and resolutions. In this case, I want to keep it responsive above 480px and let the mobile device scale it down below that so it fits the device width without horizontal scrolling. Can it be done using only the ViewPort meta tag? If not, I would prefer a solution without having to use any JS library, if possible.

ZF007
  • 3,708
  • 8
  • 29
  • 48
Susan_8940
  • 71
  • 4
  • take a look to this quistion, it may help you: https://stackoverflow.com/questions/15040408/achieving-min-width-with-viewport-meta-tag – HamiD May 27 '19 at 14:49
  • Reading the question you recommended I just realized I may have another problem. It seems my layout is always being renderized in 480px on mobile devices, even if theres more space. So if the screen resolution increases (by rotating the phone to landscape, for instance) it won't behave as a responsive layout. I wasn't aware of that because I was mostly using this [ViewPort reziser tool](http://lab.maltewassermann.com/viewport-resizer/). At this point I'm really confused about the ViewPort meta tag behaviour and I don't know how to get the result I want across all devices. – Susan_8940 May 27 '19 at 17:38

0 Answers0