How to force SPECIFIC PAGES to force desktop view in WordPress?

Question

I hope you were fine these days.
I want to make ONLY SPECIFIC PAGES force to get Desktop view on mobile NOT WHOLE WEBSITE.
I know about the viewport tag. I want to know how can I do this thing for some pages.

Thank you so much.

Answer 1

You could start by creating a child theme and overriding the header template of your parent theme. To do that, copy the header.php file of your parent theme to your child theme's directory.

Modify header.php and remove the viewport meta tag.

For example, in the default WordPress theme (Twenty Twenty) that means this line:

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

Now, you can hook into wp_head and add a different meta tag depending on the page.

To target a specific page, you can use is_page(), which accepts a page ID, title, slug, or array of such to check against.

For example:

add_action( 'wp_head', 'add_viewport_meta' );

function add_viewport_meta() {
  // Force desktop view only on the page with a slug of 'about-us'
  if ( is_page( 'about-us' ) ) {
    $viewport_meta = 'width=1024'; // desktop
  } else {
    $viewport_meta = 'width=device-width, initial-scale=1.0';  // responsive
  }
  ?>

    <meta name="viewport" content="<?php echo $viewport_meta; ?>">

  <?php
}

---

Edit: Since you mentioned that the viewport meta with 'width=1024' as the content didn't work, you could try to omit it entirely on desktop.

This would like this:

add_action( 'wp_head', 'add_viewport_meta' );

function add_viewport_meta() {
  // Include the responsive meta to ALL pages except 'form'
  if ( ! is_page( 'form' ) ) {
  ?>

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

  <?php
  endif;
}