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

541
December 30, 2016, at 3:13 PM

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

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>
Rent Charter Buses Company
READ ALSO
To implement realtime search box [on hold]

To implement realtime search box [on hold]

I am developing an Android app like FlipkartHow can I implement a search box in the toolbar to search products as auto complete text? Data should not stored in an internal array

805
How to make java class that it contains some Persian entries to jar file

How to make java class that it contains some Persian entries to jar file

I have just a class I want to become the JAR file And because it contains some Persian entries After converting to a JAR file is written in Persian Is troubled And for this reason Farsi entries must be defined in file string

403
can you recomend me for good program to build mobile apps? [on hold]

can you recomend me for good program to build mobile apps? [on hold]

can you recomend me for good program to build mobile apps? I downloaded the android studio (https://developerandroid

319
Android Espresso : How to match grand parent? without giving exact hierarchy

Android Espresso : How to match grand parent? without giving exact hierarchy

In above code snippet withParent matcher is failing because view id given is not immediate parent but grand parent

504