Question:
I'm finally getting around to writing HTML, and I'm faced with a catch: when I test my web page in a desktop browser, it looks just like I want it to, but when I test it in a mobile browser, it looks too small ( I mean, it looks just like the desktop version, but like I zoomed in at like 25%).
Is there a simple way to ensure that when the page is visited from a mobile phone, it has an appropriate size? If so, how?
Answer:
For the zoom problem you have to add a meta-tag to indicate the values of the viewport .
<meta name="viewport" content="width=device-width, initial-scale=1">
Thus, for example, indicate that the width of the mobile browser is equal to the width of the device screen itself.
You have more information about this meta-tag on the MDN .
But there is really NO easy way to do it . And this is because it depends on many things, mainly on how your site is built.
Responsive design
Nowadays, since there is so much variety of resolutions, the ideal is either to use different versions of the web, or to use a responsive design ( Responsive Web Design ).
These types of designs are based on liquid designs (generally) in which then, through media-queries , it is indicated in CSS how the design should behave depending on the size of the screen.
A very simplistic example would be that in a resolution of 1024*768 four columns would be seen and in a resolution of 320*480 one would be seen.