0
I’m working on a "responsive" HTML layout whose internal elements adjust to the width of the desktop screen and devices mobile. However, I cannot structure my layout functionally below 480px. Therefore, I would like to define a responsive behavior up to 480px and below this width let the phone use the zoom out automatically to adjust content to screen width no horizontal scrolling, behavior we usually observe when loading a non-responsive page in a mobile browser.
As it should be mine meta tag Viewport?
When I use...
<meta name="viewport" content="width=480">
...it loses configuration and in case the user gives zoom he saves that state and the zoom remains even when reloading the page, causing part of the content to be hidden and features horizontal scrollbars.
If I use...
<meta name="viewport" content="width=480, initial-scale=1">
...it will always load the page at 100%, always featuring horizontal scrollbars on mobile phones with width less than 480px.
Moreover, it seems to me that in both cases the page cannot be rendered on screens larger than 480px. In some tests on iPhone I could notice that by increasing the screen width (by putting the phone in mode Landscape, for example) it displays a version with zoom in page rendered at 480px, only.
Note: Some tool recommendation to test the behavior of meta tag Viewport in different cell phones and resolutions?
Each case is a case, but the answer arcade as duplicate there are details that will help you. But apparently you should not use initial-Shut along with a minimum-Shut. But only you testing with your document to know how to adjust. Please read the link to the documentation I mentioned there https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
– hugocsl
I had already read the information of the question you mentioned, but I still can’t find a solution. Could you at least recommend me a tool to do the tests you suggested? Currently I cannot be sure how what I define for my Viewport results in different devices and resolutions.
– Susan_8940
The best option is to use Devtools itself to test, or sync your files to Github and test on other devices by accessing Gitpage. I don’t recommend test-online tools. Chrome tb has some responsiveness plugins just vc search. PLEASE READ THIS: https://answall.com/questions/381542/existe-alguma-ferramenta-para-site-fluido
– hugocsl