Many of you might have wondered how some websites look so simple and instead of loading it on a mobile device how it is always shown in desktop mode like we see that very website on desktop. A popular website which is sarkariresult.com is a perfect example to get an idea of what is being talked about. if you wonder how this website forces its layout to always be in desktop mode even if you open it on a mobile or on a tablet. If you wonder how they do it you have landed on the right article.
Contents
Ways to force a website to display in only desktop mode
The first question that comes to our mind is that is there any script or a plugin. Sorry to inform you there is no plugin to quickly install and grab responsiveness from your blog or website. But to achieve the desired design, especially in WordPress, there are a lot of ways. But to be very specific, we are mentioning the quick two ways to do this :
- Force the whole website to display in only desktop mode
- Only force a few posts or pages on a website to display in desktop mode
Force the whole website to display in only desktop mode
If you are totally new to WordPress and not knowledgeable with CSS or editing a theme on Editor. Or you have been working on a website and you have it pretty much done however you want the desktop view to be the same on mobile devices.
Force Desktop view with WordPress Website in funtions.php
First, Put that the site is not active yet so no live version is available. And just add the below code in the funtions.php of the child theme.
function no_meta_viewport() {
return false;
}
add_filter( 'ocean_meta_viewport', 'no_meta_viewport' );
Clear cache and check the site or try a different browser.
If it doesn’t help you. There is another trick.
Force Desktop view with WordPress Website in header.php
On phones/tablets/mobile devices, etc. force Desktop view with WordPress Website.
In the header.php file, remove this code (or something similar to it):
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
But first, make sure to backup the header code in case you mess up your site!
And then click the Update File button to update the page.
In this way, you can easily make your WordPress Website force that it gets viewed only in the desktop view instead of the mobile view on mobile devices such as phones, tablets, and other mobile devices. This is great if you do not have a decent mobile version of your website or just rather prefer that the desktop version be viewed on all operating systems.
Only force a few posts or pages on a website to display in desktop mode
Now, if you would like to choose some pages or post and display them with Desktop View for mobile devices! And you don’t want to force the entire website (pages/posts) to display with Desktop View like the above method, then follow these steps.
Turning just some of the pages and posts to always load in desktop mode on a mobile phone or tablet. Some of you might think, Is it possible? Let me tell you all, this simple option will open a lot of possibilities for your site.
Now the answer is, Yes, you can use the code with the conditional tag to do it – https://codex.wordpress.org/Conditional_Tags
The below example is for the single post type –
function no_meta_viewport() {
if ( is_single() ) {
return false;
}
}
add_filter( 'ocean_meta_viewport', 'no_meta_viewport' );
Again, if you are not clear how to force only a single post or page to display in desktop mode on a mobile device.
Depending on whether you are on a particular page, you will need to conditionally set/remove that meta viewport tag from the head. By default, it’s probably something like:
<meta name="viewport" content="width=device-width, initial-scale=1">
What you want on that page will be something along the lines of this:
<meta name="viewport" content="width=1400">
You are trying to specify the width, rather than allow the browser to scale to it. So if you have a content container div, for example, that has a max-width of 1200px, then you could put to force the browser’s display of the page with this width context, enter 1200 in the content property for the meta-viewport tag.
This could be a great starting point for a WP PHP function, which will allow you to target a particular page: is_page() | Function | WordPress Developer Resources. Conditionally adding a CSS class to your body element will enable or disable responsive media queries.
Final Words
It depends on your theme and how it handles mobile devices:
Does it have a specific design for mobile?
For that, you will need to remove the scaling and width meta.
Is the design flexible enough to adapt to any width?
In that case, you will have to adapt the style to your case.
In both cases, enforcing the desktop version to show up might not be the smartest thing to do. Screen resolutions are getting better even in low-end products. This means the page width is getting wider too.
But a concern arises, it is possible that your content will appear too small on the screen and be difficult to manage.