CODEWITHSUNDEEP
htmlgoogle-chrome-devtoolsresponsive
Sunil
Sunil

Reputation: 21396

Why is Chrome shrinking the view in responsive mode?

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)

Shrunk view in Chrome Dev tools

Upvotes: 8

Views: 4963

Answers (2)

Peppe
Peppe

Reputation: 71

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!

Upvotes: 7

Sunil
Sunil

Reputation: 21396

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");
        }

}

Upvotes: 3

Related Questions