Search
Close this search box.

Force a Desktop Version of a WordPress Site on a Mobile Device

Listen to this article

View Desktop Version on Mobile DeviceWe take a lot of effort in every theme we develop to ensure that it best suits the client needs. Apart from the stated objectives, the understood requirements are building an SEO friendly, speedy, and responsive site. This particular article has been inspired by a use case in a client’s theme development project. The client wanted a responsive website. But there was a specification to provide an option as a link to force the desktop version on a mobile device.

Basically the requirement was this, when the site was opened on a mobile device, there had to be an option, ‘View Desktop Version’, which basically rendered the site as it would be visible on a desktop computer. As far as the implementation goes, this involves turning off the responsiveness aspect of a site.

[space]

Meta Viewport Tag

In a previous article, we had mentioned, how to make images and text responsive. By following the same principles here, while developing a theme, we have to understand the importance of the Viewport meta tag. Basically the viewport information, is the most important factor, which helps identify the device the site is being displayed on.

And for a responsive website, this tag would be placed in the header as follows:

<meta name="viewport" content="initial-scale=1, width=device-width">

Here, ‘width’, set to device width, shapes the view of the website according to the device. Thus, if we change this information, we can fool the site to believe, that the device is a desktop and the browser engine will take care of rendering the desktop version.

[space]

Showing the Desktop Version on a Mobile Device

Now, to begin with the implementation. First of all, we need to add a link in the site, ‘Show Desktop Version’, which will be visible on a mobile device. Add the following HTML code, as appropriate, in the header or footer, of your theme.

<!--hyperlink to change browser layout-->
<a href="#" class="mobileSpecific" id="viewDesktopLink">Show Desktop Version</a>

The class ‘mobileSpecific’, has to be added in the style.css of your theme, to ensure that the link is visible only on a tablet or a mobile device.

/* for desktop devices or wide screens, do not show the link */
@media only screen and (min-width: 980px)
{
  .mobileSpecific
  {
   display:none;
  }
}

[space]

Next, we need to make the switch when a user clicks the link. For this we will use JavaScript. Add this code in the functions.php of your theme, or appropriately place the JavaScript code in your WordPress site, as per your needs.

add_action('wp_head', 'myCustomFunction');
function myCustomFunction()
{
if ( wp_script_is( 'jquery', 'done' ) )
{?>
  <script type="text/javascript">
  var desktopBreakpoint = 980;
  jQuery('#viewDesktopLink').click(function(e) {

  // prevent default link action
  e.preventDefault();

  // set viewport content width
  jQuery('meta[name="viewport"]').attr('content', 'width=' + desktopBreakpoint );
});
</script>
<?php }
}

This code will basically set the viewport information, to force the desktop layout. Note, that we have used 980 as the desktop breakpoint. You need to set a value accordingly. Also, this is just one part of the solution. The other is to provide the user an option to switch back to the mobile site.

[space]

To allow the user to switch back to the mobile version, your jQuery (in myCustomFunction) would have to be updated as follows:

if(jQuery('#viewDesktopLink').text() == '<?php _e("Show Desktop Version") ?>')
{
  jQuery('#viewDesktopLink').text('<?php _e("Show Mobile Version") ?>');
  jQuery('meta[name="viewport"]').attr('content', 'width=' + desktopBreakpoint );
}
else
{
  jQuery('#viewDesktopLink').text('<?php _e("Show Desktop Version") ?>');
  jQuery('meta[name="viewport"]').attr('content', 'width=device-width');
}

[space]

Note that there could be a scenario, that you might still not notice any changes. This could be due to the way your theme was structured, because of which device specific stylesheets were being loaded. In that case, the CSS for the desktop version might not be loaded when the site is opened on a mobile device. In this situation, you would have to explicitly load the CSS for the desktop version.

30 Responses

  1. hello….nice article you’ve put up….. Im having this challenge….i use two themes one for mobile and the other for desktop but when i visit my desktop via site.com/?nomobile it shows the desktop theme alright when i try reading any post it redirect to the mobile view of the post…..any fix for it please??

    1. Hi,

      How and when are you performing the theme switching? I’m guessing when you switch to a different page, the viewport information might be getting overridden, and the mobile view is displayed. Can you provide me with a link to your site?

  2. hi, wonderful article… but what if, its the CSS that decides the min and max width for each concerned device (enables the resolution to either mobile or desktop view). How can i force it to either desktop or mobile. Because editing the “width” to 980 or 980px in the tag () doesn’t even change the view.

    Will appreciate your suggestion

    1. Hi Yimika,
      The viewport information and the media queries work together to display the content. When we set initial-scale to 1 and width to device-width, the elements are displayed as per the display device or resolution. To force the display of the elements to a desktop view or mobile view, we have to force the width, to say 480 for mobile view, and the media queries will actually display the content for the mobile view.
      So, it’s important that along with the viewport information, you should have media queries in your CSS.
      Hope that helped you.

  3. Thank you Rohan for your guide. This is EXACTLY what I’m looking for and this seems to be the only article I can find online that is fairly straightforward. One question though. When you add the following to the functions.php file:

    var desktopBreakpoint = 980;
    jQuery(‘#viewDesktopLink’).click(function(e) {

    // prevent default link action
    e.preventDefault();

    // set viewport content width
    jQuery(‘meta[name=”viewport”]’).attr(‘content’, ‘width=’ + desktopBreakpoint );
    });
    <?php }

    Do you need to put anywhere?? If so, what do I fill in for the $handle, $src, etc values? I don’t really know too much coding and I seem to be stuck on this step. Thank you for your help!!

    1. Hi Shabnam,
      Thanks. $handle is a unique name for your script. You can add any unique value here. $src should be the path to your file (relative path). $deps is jquery since it does not depend on any other libraries. Those would be the minimum values you’d need to specify.

        1. This is what I put under logo:

          Show Desktop Version

          Then inside header tag:

          function myCustomFunction()
          {
          var desktopBreakpoint = 980;
          jQuery(‘viewDesktopLink’).click(function(e) {

          // prevent default link action
          e.preventDefault();

          // set viewport content width
          jQuery(‘meta[name=”viewport”]’).attr(‘content’, ‘width=’ + desktopBreakpoint );
          });
          }

          if($(viewDesktopLink).text() == ”)
          {
          jQuery(‘viewDesktopLink’).text(”);
          jQuery(‘meta[name=”viewport”]’).attr(‘content’, ‘width=’ + desktopBreakpoint );
          }
          else
          {
          jQuery(‘viewDesktopLink’).text(”);
          jQuery(‘meta[name=”viewport”]’).attr(‘content’, ‘width=device-width’);
          }

          Am I missing something?

  4. Hi Rohan,

    this is exactly what I need. Thank you for that! However, I do not get it to work… I included the code into my functions.php escluding the opening PHP tag as obviously there is already one in my functions.php. However, the code is added into my BODY tag and not into the header, therefore. I assume it is also not run…
    Any idea what could be the problem? I really do not know much about coding…

    Thanks,
    Ruben

      1. Hi Rohan,
        thanks a lot. The code is now in the header and seems like it is active. However, clicking on the link does not change the content width in the viewport section.
        The website is http://www.pferdepension-vogesen.de and the link to change to “desktop mode” (currently always visible) is in the footer. Could you maybe have a quick look?

        1. Hi Ruben,

          Try replacing

          jQuery('#viewDesktopLink').click(function(e) {
          
          // prevent default link action
          e.preventDefault();
          
          // set viewport content width
          jQuery('meta[name="viewport"]').attr('content', 'width=' + desktopBreakpoint );
          });
          

          with

          jQuery('#viewDesktopLink').live('click', function(e) { 
            
            // set viewport content width
            if(jQuery('#viewDesktopLink').text() == '')
            {
              jQuery('#viewDesktopLink').text('');
              jQuery('meta[name="viewport"]').attr('content', 'width=' + desktopBreakpoint );
            }
            else
            {
              jQuery('#viewDesktopLink').text('');
              jQuery('meta[name="viewport"]').attr('content', 'width=device-width');
            }
            
            // prevent default link action
            e.preventDefault();
            
          });
          

          and let me know if it works.

          1. Hi Rohan,

            wit the new code, the link disappears. However, the “content=width” section in the viewport tag still does not change to 980. It remains at “device-width”. Any idea why that could be? I really want to make this work…

          2. Hi Rohan,

            now it is working. Not sure how I did it but I made work with the code in your blog post. THANKS A LOT for your help! I have only one more question. I have now also added a pop-up for mobile devices on my website, where the user should be able to choose whether she wnats to see the desktop or mobile version. For this, I have added the additional ID “viewDesktopLink1″ to the javascript, which is working fine on my desktop browser (when I make it smaller) and it works well on my iPhone. It is just not working on any other mobile device (Android, Windows etc.). Any idea why this could be?
            Here is my full code:
            add_action(‘wp_head’, ‘myCustomFunction’);
            function myCustomFunction()
            {
            if ( wp_script_is( ‘jquery’, ‘done’ ) )
            {?>

            var desktopBreakpoint = 979;
            jQuery(‘#viewDesktopLink, #viewDesktopLink1’).live(‘click’, function(e) {

            // set viewport content width
            if(jQuery(viewDesktopLink, viewDesktopLink1).text() == ”)
            {
            jQuery(‘#viewDesktopLink’).text(”);
            jQuery(‘meta[name=”viewport”]’).attr(‘content’, ‘width=’ + desktopBreakpoint );
            }
            else
            {
            jQuery(‘#viewDesktopLink’).text(”);
            jQuery(‘meta[name=”viewport”]’).attr(‘content’, ‘width=device-width’ );
            }

            // prevent default link action
            e.preventDefault();
            });

            <?php }
            }

          3. Ruben at the point where you have set viewport content width, try updating it to this –
            if(jQuery(‘#viewDesktopLink, #viewDesktopLink1?).text() == ”)

          4. Hi Rohan,
            it is fully working now. Thnaks a lot for your support and the whole code.
            I needed to replace the live(‘click’ query with an on(‘click’, then it also works for Android. Not sure why but it does.

            Thanks,
            Ruben

  5. Thank you so much for you Outstanding Post!
    But i have a issue, when i click then it’s show exactly as desktop version BUT when i try to back from Desktop view then it’s doesn’t work ?

    Can you please give me a solution ?

    Regards
    Raazon

  6. I just figured out how to do this. I found out accidentally that when you setup domain forwarding (and use masking) in GoDaddy, it will always show the desktop version of the site when you visit the domain on a phone. Now, you don’t want to buy a different domain for every website you want to be “non-mobile”. So, simply setup a sub-domain and forward it to your website (using masking). When you visit that subdomain on a phone, it will show the full desktop version. Hope this helps you as much as it helped me 🙂

  7. i have done everything but i get struck in the last step i.e adding in the cusyom function it showing like these when i update
    This page isn’t working

    ttimesacademy.in is currently unable to handle this request.
    HTTP ERROR 500

  8. dear sir,
    i am failed to setup this process. could not show desktop view or mobile view. please make a video tutorial describing this full process and show where and how put those code. Its very necessary for us.

  9. @Rohan Vakharia

    I am having a problem also with desktop versus mobile view. Since i am running in a wordpress multi site a don’t have access in function.php to put this code. Now, i want to know if those code will work in script inserter plugin? Thank’s

  10. Hi! I am stuck at the last part. Where can I find the JQuery in mycustomfunction? Thank You very much for helping us

  11. hi bro, very interesting article, but how do i use it to force some pages but not all pages into desktop view on mobile devices without allow mobile view at those pages… thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads