0

When I open an html file directly from the folder it is located locally in, I get a viewport with width as 1366px - which also is the width of my screen. But when I run the same file from http server it automatically reduces the width of viewport to 1226px - 1241px. Doesn't matter what content I have on the page and how much, it always reduces the vw.

The meta tags that I am using are -

<meta charset="utf-8" /> &
<meta name="viewport" content="width=device-width, initial-scale=1" />

Any idea why this happens and how to fix this?

EDIT - The difference is because default zoom level for local server is not 100% but a little more.

Thanks !!

codeBug 07
  • 73
  • 7

2 Answers2

0

as i think you should use the meta tag that corrcets the viewport anywhere...

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Kh4lid MD
  • 125
  • 1
  • 2
  • 10
0

I think this gap you are seeing is due to the scrollbar (which is normally around 15px). What are you using to get your viewport width? Maybe try the following:

document.documentElement.clientWidth

More information found in this response: https://stackoverflow.com/a/8876069/2440863

ALSO

Below are the metatags I use:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
mdurchholz
  • 523
  • 1
  • 4
  • 16
  • I tried these metatags as well but still reduces the viewport. & I just checked the width by inspecting the HTML – codeBug 07 Oct 19 '20 at 04:21
  • Gotcha, I don't think the metatags are your issue here. You might need to provide more information on what it is you're inspecting. Is this a fixed element of some kind? Sometimes the CSS being used can be a factor with this. – mdurchholz Oct 19 '20 at 04:25
  • I am just inspecting the HTML tag and it shows the width changed by a huge margin. As I mentioned, it doesn't matter how much content I have on the page, it reduces the width. For example, I just have one button on the page and no css applied, opened the file directly and the viewport is 1366px.Then, opened the page from local server and inspected the html width . It got reduced to 1241px. I am not able to understand why. & there is even no scrollbar. – codeBug 07 Oct 19 '20 at 04:50