How to Force Desktop View on Mobile Devices with Bootstrap 3?

Providing Desktop View on Mobile Devices with Bootstrap 3

Liam, you've expressed a desire to display a Bootstrap website in its desktop viewport on mobile devices. Let's explore how to achieve this.

Viewport Modification

The crucial aspect here is setting the viewport. Introduce a link that refreshes the page and appends "?desktop_viewport=true" to the URL. This will allow you to create a session and render the desktop view (e.g., "width=1024") instead of the responsive one ("width=device-width").

Button and Session Modification

Include a button to toggle the desktop mode:

<code class="html"><a href="mywebsite.php?show_desktop_mode=true">I want desktop mode!</a></code>

In your PHP file, utilize this code:

<code class="php"><?php
session_start();
if ($_GET['show_desktop_mode'] == 'true') {
    $_SESSION['desktopmode'] = 'true';
}
?></code>

Conditional Viewport Setting

In the section, add conditional logic to set the viewport based on the session value:

<code class="html"><?php
if ($_SESSION['desktopmode'] == 'true') {
    /* DESKTOP MODE */
    ?>
    <meta name="viewport" content="width=1024">
    <?php
} else {
    // DEFAULT
    ?>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php
}
?></code>

The above is the detailed content of How to Force Desktop View on Mobile Devices with Bootstrap 3?. For more information, please follow other related articles on the PHP Chinese website!