Is it possible to specify a custom width for CSS media rules to use in order to force a desktop mode?

Question

Is it possible to specify a custom width for CSS media rules to use in order to force a desktop mode?

130 Views Asked by BjarkeCK At 19 April 2025 at 11:09

I want to give my mobile users a desktop mode, but I'm really not interested in making a non-responsive CSS version for every css file i have, so i wonder if it is possible without.

I've googled a bit, and the only suggestion I've seen is setting a custom width in the viewport meta tag. But the css media rules wont listen.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=1000">
    <!-- CSS -->
  </head>
  <body style="width:1000px;">
    <div class="responsive">
      <p>Why does the CSS media rule still take effect even though I've specified a width in the viewport meta tag?</p>
      <p>I've misunderstood them i bet!</p>
      <p>How can i force it to think its being viewed in another resolution?</p>
    </div>
    <div class="indicator"></div>
  </body>
</html>

CSS

.responsive {
  padding: 20px;
  background: orange;
  color:black; 
}

@media (max-width: 500px) { 
  .responsive { 
    background: green; 
    color:white; 
  }
}

.indicator { position:fixed; top:0; right:500px; height:100%; width:1px; border-right:2px dashed red; padding:0; }

Live Example

http://liveweave.com/jB0OfH

Update

It actually does work (Just not on desktop - only on mobile). It sets the resolution of the viewport window, which i guess is equivalent of resizing the browser it self on PC.

So you basically can't use use the viewport for anything on PC, and the responsive options i'm making won't work. Would still love a workaround for this that works doesn't involve i frames.

Original Q&A

There are 2 best solutions below

**BjarkeCK** · Answer 1

It is not a good solution so I won't mark it as correct, but it is a solution...

Wrap the entire page in an iframe that has width:100% and min-width:1000px

<!DOCTYPE html>
<html>
  <head>
    <style>
      iframe, body, html {
        width:100%;
        height:100%;
        padding:0;
        border:none;
        min-width:1000px; 
      }
    </style>
  </head>
  <body>
    <iframe src="linkToPage"></iframe>
  </body>
</html>

**AudioBubble** · Answer 2

Consider putting a .responsive class on the body element, then write your CSS as

function toggle() {
   document.body.classList.toggle("responsive");
 }

.class {
   padding: 20px;
   background: orange;
   color: black; 
   width: 100px;
   height: 100px;
 }
    
 @media (max-width: 500px) { 
   body.responsive .class { 
     background: green; 
     color: white; 
   }
 }

<body class="responsive">
  <div id="box" class="class"></div>
  <button onclick="toggle()">Toggle responsive</button>
</body>

With the .responsive class on the body, the media query will kick in. Without the .responsive class on the body, it will be ignored.

Is it possible to specify a custom width for CSS media rules to use in order to force a desktop mode?

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in BROWSER

Related Questions in MEDIA-QUERIES

Related Questions in META-TAGS

Trending Questions

Popular # Hahtags

Popular Questions