How to Scale My Website Based on Different Screen Width

Question

I would like to change the scale of my website to 0.7 or similar depending on the width of the device used.

The only helpful information I could find so far is the following <meta> tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

I was wondering if it is possible to write some code like the below one to apply a certain scale of the website only if the width of the device matches a certain width or width range:

@media screen and (min-device-width : 320px) and (max-device-width : 480px) { 
  .body {
    initial-scale: 0.7;
  }
 } 

Or am I talking total non-sense? Sorry, I am new to CSS and HTML and just looking for a quick workaround to decrease the initial-scale on a laptop screen from 1.0 to 0.7.

Your answers will be highly welcomed. Thanks a lot in advance!

Best,

Pascal

Answer 1

Whenever I write a html code, I make use of the below line:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

Now let's understand what this means:

initial scale: controls the zoom level when the page is first loaded. This takes the original pixelation on the device screen.

maximum scale: defines how much after the initial scale a user can zoom in.

minimum scale: defines how much after the initial scale a user can zoom out.

User Scalable = 0 means a user cannot zoom-in or zoom out.

By writing the above line as a meta tag we keep everything to: No zoom set, user cannot zoom.

Now we can set the scale to 0.7 as well and accordingly the other 3 values if we want to.

But the standard way to write is as mentioned above.

Media queries would come into picture when after a breaking point (in case of mobile devices) we want the elements to change its orientation and how they would be arranged on the screen (responsive) without changing code structure/design.