CODEWITHSUNDEEP
javascripthtmlbootstrap-4
Ogoh.cyril
Ogoh.cyril

Reputation: 459

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

I'm updating site and the mobile view isn't looking that presentable. I tried rewriting the code, but it's still frustrating, as I wasn't the person who built the front-end

Is there any code either in the { header } or a JavaScript function that can achieve this?

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

Upvotes: 0

Views: 10054

Answers (3)

Pankaj Tanwar
Pankaj Tanwar

Reputation: 1060

Here are a couple of things you can try -

  1. In some cases, it will work. The issue with this is, it widens the mobile browser view, not exactly the desktop view.

<meta name="viewport" content="width=1024">

  1. Update the scale in meta tag. It worked for my website properly.

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

(See, it's 0.1 instead of 1.0)

Upvotes: 1

Diogo Peres
Diogo Peres

Reputation: 1372

You can change the meta link to display a desktop version:

<meta name="viewport" content="width=1024">

Instead of the responsive version which is:

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

Upvotes: 2

MotemaddeN
MotemaddeN

Reputation: 534

I recommended a few solutions for you

if you want to identify the device use JavaScript

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

OR

'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" />

Upvotes: 1

Related Questions