Can I fake my screen width with css or javascript?

Question

@media(max-width: 992px){
    .sidebar-nav{
        display: none;
    }
}

my laptop screen width is 1200px, I want to fake my screen width to 950px so that css @media(max-width: 992px) applied on it. Any idea?

I lazy to use css @media for 1200px screen, because too many things to edit like top menu, form input btn width, footer menu.... i guess the easy way is to fake all desktop and laptop screen to 900px.

Does this answer your question? [Faking max-device-width](https://stackoverflow.com/questions/6149131/faking-max-device-width) — mgutt, Aug 29 '21 at 06:46
For what purpose? If you’re designing the page and want to try out a given viewport, most browsers have a “responsive view” developer tool (or failing that, you can just resize the window). For example, in Firefox, Ctrl+Shift+M. — Ry-, Aug 29 '21 at 06:46
@mgutt Sorry but No. I want to make my website view as 900px for all laptop and desktop, user no need to use chrome Emulation tab / Inspect — Pei Ning, Aug 29 '21 at 06:48
fake has a negative connotation, but if you mean emulate to check something out, use Buddha's answer (to open dev tools you need to right click anywhere on the site and select "Inspect element" or hit CTRL+SHIFT+I (i)) — Flash Thunder, Aug 29 '21 at 06:49
@PeiNing: If it’s your website, alter the CSS so the requirement no longer applies… — Ry-, Aug 29 '21 at 06:50
I lazy to use css @media for 1200px screen, because too many things to edit like top menu, form input btn width, footer menu.... i guess the easy way is to fake all desktop and laptop screen to 900px. — Pei Ning, Aug 29 '21 at 06:54
[link](tapfood.net) doesn't alter the html document size, it wraps the whole content in a div, and styles that div. I guess you could do **that**. — , Aug 29 '21 at 07:00
Have you tried to use min-width and max-width together inside your @media ? — G-Cyrillus, Aug 29 '21 at 07:23
What you really should do is to use [this](https://stackoverflow.com/questions/11392478/how-to-replace-a-string-in-multiple-files-in-linux-command-line) (assuming you are on linux) to replace all the wrong media query to the intended one. — TYeung, Aug 29 '21 at 07:23

score 2 · Answer 1 · answered Aug 29 '21 at 06:47

2

Open up your dev tools and in the top left, there is a mobile device type icon, click on it and you will be able to do it.

answered Aug 29 '21 at 06:47

It is not fit my need. I lazy to use css @media for 1200px screen, because too many things to edit like top menu, form input btn width, footer menu.... i guess the easy way is to fake all desktop and laptop screen to 900px. – Pei Ning Aug 29 '21 at 06:56
Hmm so if your want to change the height and width of your actual html doc, I don't think you can do that. I tried applying height and width to my html tag and body tag, it doesn't work. – Aug 29 '21 at 06:59

score 1 · Answer 2 · answered Aug 29 '21 at 06:47

Try to use inspect element options of browser . You can change screen size there and see the css difference of different screen sizes..

Try to use

Ctrl + shift + c

( This can be differ depending on system)

Or try right click on screen and go to inspect element

Baskaran Ajiharan · Answer 3 · 2021-08-29T07:34:56.607

media query only works when you manually resize your page. window.resizeTo() function is already in there but the function not working on some browsers so if you want to resize your window you can open a new window then you can resize it

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="./test.css" />
      </head>
      <body>
        <script>
          const w = window.open("", "", "width=500,height=500");
          w.resizeTo(900, 600);
        </script>
      </body>
    </html>

Can I fake my screen width with css or javascript?

3 Answers3