Search code examples
google-chromemedia-queriesgoogle-chrome-devtoolsmobile-devices

Is there a way to get Chrome Dev Tools to emulate default zoomed out view of wider-than-screen-width websites for mobile devices?


I'm trying to use Chrome's Dev Tools to emulate a standard rendering of a webpage on numerous mobile devices. However, when attempting to emulate devices with smaller screen resolutions than the width of the page I'm trying to render, I'm only seeing what would effectively happen if I just reduced the size of my desktop browser's window by dragging its edges.

I understand that that's useful but the experience I'm looking to test is how the page will look when the mobile device displays a zoomed out view of the site to fit the screen (this is typically what you see on mobile devices when a webpage isn't configured with viewport meta tags and/or CSS media queries).

Is there any way to achieve emulation of this default zooming behavior with Chrome's Dev Tools?


Solution

  • If you mean with non 'responsive sites with no viewport' to be rescaled to the default viewport of the device to get an idea of what the rescaling looks like, you can more or less reproduce it visually, yes.

    Click on 'Screen' to do a custom emulation. And manually enter your target pixel display width and height sizes as 'Resolution'. Say 320 x 480 for an iPhone target.

    Then enter a 'Device pixel ratio' that is: 1 / your-fixed-width * device-width e.g. 0.3125 % for a fixed-width-design of 1024px to a 320px iPhone resolution target width.

    It will fit your fixed-layout in a contained viewport accordingly, which you can manually rescale arbitrarily by changing your browser window size, or by moving the Chrome inspector bar up and down.

    Fonts won't be as crisp and clear as a real device but that should give you an accurate visual layout.