0

We chose the responsive theme for our homepage. I was wondering if with the responsive theme, could we make it so that you can get to the desktop version from the mobile one by just pressing a button?

0

I haven't actually done this, but theoretically this is how I would. This will be easier if you've gone with a desktop-first approach rather than a mobile-first approach (I would think).

1. Query param to swich

Perhaps:

http://yoursite.com/?resp=no

2. Remove viewport meta and class the body

Then you test for that param. I'll use PHP here just because but it could be anything. We'll only remove the viewport meta tag if they don't want responsive design, as well as put a class on the body.

<head>

   <title>My cool site huzzah</title>

   <?php
     if (!$_GET['resp'] == 'no') { ?>
       <meta name="viewport" content="width=device-width">
   <?php } ?>

</head>

"> You'll probably want to get a little more complex here. You'll want to set a cookie (or perhaps use localStorage) to remember the users preference. Then you don't just test for the query param but also the value of that cookie before making the decision to exclude the viewport meta or not (and the body class).

3. Qualify your media query styles

One way to do this would be to exclude the loading of a separate stylesheet where you have all your responsive styles. That might work for you but I'm generally a fan of keeping as much CSS together in one file as possible. If you do keep it in one file, you can use that "resp" body class to ensure media query styles don't take place if they shouldn't.

.page-wrap { width: 80%; }

@media (max-width: 600px) {
  .resp .page-wrap { width: 100%; }
}

This way the responsive style will only take hold if the media query matches and the proper class is on the body indicating it's OK to use responsive styles.

4. Have good UI to switch between

Whatever you cook up, make sure it's pretty clear how you get back and forth between the two site styles and that it sets the cookie stuff properly.

  • how can i add to my file.php ? <-where ? – 이시우 Mar 17 '16 at 7:52
  • What do want to add ? – Vishwas Bhatnagar Mar 17 '16 at 9:12
  • <head> <title>My cool site huzzah</title> <?php if (!$_GET['resp'] == 'no') { ?> <meta name="viewport" content="width=device-width"> <?php } ?> </head> – 이시우 Mar 17 '16 at 9:34
  • Shall be added to any place? – 이시우 Mar 17 '16 at 9:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.