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>
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>
3 Answers
Reset to default 2You 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">
I remended 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" />
Here are a couple of things you can try -
- 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">
- 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)