How to manipulate screen-size/viewport size, so desktop will display mobile version of website?

Question

Sorry for the ambiguous question, coding noob here. Essentially, I have a site where the entire container is set to 100vw, and then font-sizes also set in vw. This works so that no matter how I scale the site, on mobile or desktop, it'll display nicely.
However, I want it to display on a desktop as if it was a mobile-sized screen (basically the view you get if you do the mobile view in Chrome).
If I adjust the width of the container to be less than 100vw, that is fine, but since the fonts are still set relative to the viewport, they become too big for that width. So basically I want to find a way to tell the computer, "even though your actual device-width is this, act as if the device-width was this".

I have <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=yes"> in my html files, and have tried setting the width to various px amounts rather than device-width, but still no luck. Thanks so much for any help!

Answer 1

I think what you are looking for is Media Queries. Check out this article on CSS-Tricks.

Media queries allow you to select based on properties of the user's device, such as screen size. This is similar to how pseudo-classes like :hover makes a selector more specific, except you nest the styles in a @media block.

Typically, if you want your website to change appearance based on the width of the screen, this would be the easiest and most reliable way to do so. For example, you have the font size set relative to the viewport, but you don't want it to get too big. You can add a media query that sets a maximum size like this:

body {
  margin: 0;
}

#content {
  width: 100vw;
  font-size: 100vw;
  
  margin: auto;
  overflow: hidden;
  background: #ddd;
}
    
@media all and (min-width: 300px) {
  #content {
    width: 300px;
    font-size: 300px;
  }
}

<div id="content">
  Lorem ipsum
</div>

When the screen is at least 300px wide, the latter style overrides the former because it is more specific.

Here is a fiddle so you can see it work while adjusting the window size.

Notes

1. Setting the meta property viewport to device-width primarily just tells mobile browsers that your website works with small screens. Without this, some browsers will essentially "zoom out" so that it renders like the screen is as large as a common monitor. This way everything will still look alright on small screens, even though everything will be really small. This is not for telling the browser to use "mobile mode". That is not a thing.

2. You should probably avoid setting font size to a vw unit for most text. You should stick to basic units like rem, em, or pt for fonts because users can set accessibility options in their browsers that will affect the font size. You want your users to have the font size they want. Only use vw on special text like main titles/headers, not on large bodies of text like an article.