html - Stop meta viewport responsiveness

Question

Demo

I want to make responsiveness behaviour like at this site. There is meta viewport content set to width=device-width, initial-scale=1, maximum-scale=1, but if i resize browser vieport size by reducing its width (about 200px width and smaller), content scales proportionally and responsiveness "swithes off".

You can compare this site and jsFiddle demo with picture below. The same text with the same font-size, but scales differently.

UPD

I need to know how can i set 20px font size and it will scale proportionally like without using meta viewport. Try to make a <h1> with meta viewport and without one, you will understand what i mean

Answer 1

Your question is unclear, but assuming you're talking about the fact that on your demo, the content is blocking its resize after a certain minimum width:

It is important to understand the function of the meta viewport.

The viewport is the user's visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

-Source

This function prevents a user to zoom in or out on your website. The code you give us says that the width of your webpage must be the width of the parent viewport (equal to your browser's viewable area), that the initial zoom has to be 1 (that means no initial zoom is set) and that the maximum scale can be 1 (that means no zooming in allowed).

The fact that your website is responsive until a certain minimum width hasn't any direct link to the meta viewport.

The responsiveness of a website is based on what's called breakpoints in CSS. This gives certain CSS rules based on the viewport properties (in responsive cases: if the screen's width is between a certain minimum amount of px and a maximum amount). According to what I can understand, you actually need to set the CSS min-width attribute to your website's body like this:

body {
    min-width: 300px; /*You'll have to set the value you wish here*/
}

The next thing you have to do is choose how you will handle screens smaller than 300px. There are two options after this:

• You can choose to force-give your webpage the device's width and prevent horizontal scrolling but this will hide all the overflow. I personally suggest not to use this technique. For doing this, you'll need to hide all html's overflow with this CSS: html {max-width: 100vw; overflow-X: hidden;}.

• The other (better) option is to give your webpage the minimum required width. This will allow horizontal scrolling and a better user experience. To do so, use this CSS code: html {min-width: 300px; overflow-X: visible;} (remember to replace 300px with your desired minimum width).

This should be all for now. Remember that there are hundreds of guides for responsive web design available. Hope your issue is solved.