Why is Chrome shrinking the view in responsive mode?

Question

I have a page that is supposed to be responsive and it also has a viewport tag for mobile devices as below.

<meta name="viewport" content="width=device-width, initial-scale=1.0,
                                 maximum-scale=1.0, user-scalable=no">

However,in Chrome Dev Tools when the page is first viewed in landscape mode and then rotated to portrait mode the page size becomes very small even though the width of html page is the width of the device after rotation i.e. 400px. This is shown in following video: Page being shrunk when device is rotated from landscape to portrait mode in Chrome tools

A screenshot of shrunk page is as below.The width of visible body is 400px yet its not extending to the right edge of the screen shot.

Question: Why would this happen even when the correct viewport tag has been included? May be its a Chrome tools emulator bug/issue.

UPDATE 1

I also found that this issue is not just with Chrome Dev Tools emulator but also happens on real mobile devices like android or iphone smart phones. I verified this on an android smart phone (chrome) and an iphone 6plus ( safari as well as chrome)

What if you manually enter size or rotate back to landscape? — Filip Š, Nov 26 '18 at 18:45
what happens when you do a refresh after the "device" is rotated? Is it still scaled wrong? — Zak, Nov 26 '18 at 18:45
@Zak, when refresh is done then it fits the width perfectly. — Sunil, Nov 26 '18 at 18:47
@Filip Š, If I manually change 400px to 402px then nothing happens to the view i.e. its still shrunk. — Sunil, Nov 26 '18 at 18:48
@Sunil -- I honestly think this is a bug in Chrome Dev -- I just recreated the issue with a site that I am working on and the same thing is happening. Apparently, whether on purpose or not, Chrome requires a refresh when rotating the device in Dev Tools. — Zak, Nov 26 '18 at 18:51
@Zak, thanks. I thought so. On a real mobile device this should not happen. — Sunil, Nov 26 '18 at 18:53
It mostly happens with me but that might not be the case with you. click on "inspect widow" and hit `ctrl - 0`(widow fits original size). The browser might have shrunk or stretched itself so try this. — Mohammed Wahed Khan, Nov 30 '18 at 05:36
@MohammedWahedKhan, the issue I described is not just a Chrome Dev Tools issue, but it also happens on a real mobile smart phone. — Sunil, Nov 30 '18 at 06:49

score 4 · Answer 1 · edited Oct 21 '22 at 12:13

4

I had the same problem on my website built with Bootstrap. Same issue after landscape view and back to portrait (only with Google Chrome). I fixed it after a few searches. I changed the meta declaration from:

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

to

<meta name="viewport" content="width=device-width, minimum-scale=1">

After that I wrapped all the content in a div with the follow CSS code:

div#wrap { 
    overflow-x : hidden;
    position:relative;
    width:100%;
}

Hope this fix will help!

edited Oct 21 '22 at 12:13

eckza

2,212
3
22
28

answered Oct 05 '22 at 07:25

Peppe

41
1

I don't have a CSS framework in play yet, but I was struggling with this - and adding `` to my `index.html` fixed the issue as if by some strange magic. – eckza Oct 21 '22 at 12:14

Sunil · Accepted Answer · 2018-12-01T06:53:42.017

I was able to get around this issue by subscribing to JavaScript's orientationchange event using the code snippet given below below.

I have used jquery in code below to set the overflow-x for html and body to hidden when rotating to portrait mode, since this shrinking was only occurring when rotating to portrait mode.

window.onorientationchange = function() { 

       let htmlElement =  $("html");
       let bodyElement = $("body");

       if($(window).innerWidth() < $(window).innerHeight()) {//landscape to portrait
           htmlElement.css("overflow-x","hidden");
           bodyElement.css("overflow-x", "hidden");
        } else {//portrait to landscape
           htmlElement.css("overflow","auto");
           bodyElement.css("overflow", "auto");
           //below 2 lines makes the UI not shrink in portrait mode 
           htmlElement.css("overflow-x","auto");
           bodyElement.css("overflow-x", "auto");
        }

}

Why is Chrome shrinking the view in responsive mode?

2 Answers2

Linked