How to show WordPress desktop version on mobile easily
Mobile-Friendly DesignA mobile-friendly website is one that is designed to work the exact same way across devices. This means that nothing changes or is unusable on a computer or mobile device. Features like navigation drop-downs are limited, as they can be difficult to use on mobile. And no Flash animation is used. The website is literally the same across the board, with no usability concerns regardless of the device on which it is being viewed.
Desktop FriendlyPerhaps the most frequent misconception we hear about mobile websites is that they are just smaller versions of their regular or “desktop” websites. (The desktop website being the one you are used to using on your laptop or home desktop computer where you use a mouse to navigate around a larger page with a large video monitor.) Now, get out your mobile device and try to surf via your smartphone to any number of websites – maybe even your own. If what you see is a teeny-tiny, illegible version of your regular website… if you have to use your fingers to expand what you see on the screen, you are merely viewing a desktop website over your smartphone. This is not a mobile website.
We 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.
Meta Viewport TagWe 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:
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.
To allow the user to switch back to the mobile version, your jQuery (in myCustomFunction) would have to be updated as follows: 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.