Automatically Force Mobile Browser to Desktop View

How to force desktop view on mobile devices - Bootstrap?

Thanks All,

This code works for me:

var viewMode = getCookie("view-mode");
if(viewMode == "desktop"){
    viewport.setAttribute('content', 'width=1024');
}else if (viewMode == "mobile"){
    viewport.setAttribute('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no');
}

How can I Force desktop view on a mobile device from my HTML or JavaScript code

I recommended a few solutions for you

if you want to identify the device use JavaScript

/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)

'ontouchstart' in document.documentElement)

But you can use css with screen width

@media only screen and (max-width: 560px) { .exampleclass {} }

Or create a custom file for the mobile version and call it in the header

<link rel="stylesheet" media="screen and (max-width: 560px)" href="mobile.css" />

Force desktop view even on mobile

I've added some comments below, just to help you correct some errors in your HTML. You have to understand that errors like this leave a lot up to interpretation of the browser, to which each may use a different engine or different method which can't guarantee uniform results.

Comments Added:

You should not use empty rule declarations (located under body rule in CSS).
Always look for closing tags. Try to use maybe Sublime, VS Code, or Atom as they have "problem" notifiers that may help you catch these mistakes when learning. (located under body rule in CSS).
If your goal is responsiveness, try and stay away from absolute positioning, or you'll have to media query your way to the same results. (located under section rull in CSS).
Every tag opened must be closed. Especially for compatibility. Every browser will handle these errors differently, so leaving it up to the browser to decide the result, you won't see the same results in every browser (located above body closing tag in HTML).
When you close HTML tags, the format is </html>. Slashes after are for self-closing tags. (located at the end of the document).

To answer your question more directly, it's difficult. You should understand all screens have varying sizes and dimensions and you must design around this, no exceptions. There is no way to force otherwise. If you set an element to have a width of 800px but the screen is 324px wide, you will not fit that element on the screen.

So my answer is that you're looking for a way to get out of designing for responsiveness, and you can't. Yes, it can be a lot of work, but you'll develop habits as you go. Might I recommend freeCodeCamp as well, since they've added some excellent challenges to help teach newer practices to make your projects more responsive, as well as fundamentals like box model.

<!-- Always specify your DOCTYPE, note that DOCTYPE is case sensitive. -->
<!DOCTYPE html>
<html>
<!-- You should have a head tag -->
<head></head>
<style type="text/css">
  /* You should not use empty rule declarations */ body {}
  /* Always look for closing tags. Try to use maybe Sublime, VS Code, or Atom as they have "problem" notifiers that may help you catch these mistakes when learning. */

  p.Welcome {
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 23px;
    font-weight: bold;
    color: white;
    text-align: center;
  }

  section {
    border-radius: 1em;
    padding: 1em;
    position: absolute;
    /* If your goal is responsiveness, try and stay away from absolute positioning, or you'll have to media query your way to the same results. */
    top: 49%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
  }
</style>
<!-- Sections are used for giving semantic clarity to your document, so summarize what the section is -->
<section id="welcome">
  <p class="Welcome">hi</p>
  <img src="http://whatever.com/image.jpg" />
</section>
<!-- Every tag opened must be closed. Especially for compatibility. Every browser will handle these errors differently, so leaving it up to the browser to decide the result, you won't see the same results in every browser -->
</body>
<!-- When you close HTML tags, the format is </html>. Slashes after are for self-closing tags. -->

</html>

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

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;
}

Force desktop browsers to display mobile version of website

I'd be willing to bet that this solution is specific to our webapp and might not work across the board, and this solution was not perfect.

The developer who originally implemented this webapp (in React/Redux) leaned on the CSS and graphics assets of a previous iteration of the webapp. I'm not sure why, but the webapp itself has a global 50% scale applied to the viewport like this:

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

By applying the following styling to my iFrame...

...
.force-mobile {
    width: 750px;
    max-width: 750px;
    height: 1334px;
    margin: 0 auto;
    border-style: none;
    border-color: inherit;
    border-width: 0px;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    display: block;
}
...
<body>
    <iframe id="forceMobile" class="force-mobile" src="http://myhost/mobile/"></iframe>
</body>

... I got the following result:

Almost Success

This is actually functional, although there are positioning issues, and issues with offsets into image maps (the missing hamburger menu icon is caused by this). It is going to require walking through the whole app and figuring out corrections to each individual piece, but this approach got me to a functional posture, so I'm happy with it for now.

I will keep this updated as I continue making progress.