How to adjust to the aspect ratio for mobile browser

Question

I'm testing a webpage on Chrome desktop, adjusted to simulate mobile display, and I cannot figure out how to adjust the aspect ratio. It seems like the width is reflecting a 946px width and 1743px height, when it should be much smaller, reflecting mobile screen dimensions. When I access the page on my actual mobile device, the same problem occurs. How can I either adjust or adjust to what is happening so that my page is a normal size on mobile? Thanks

Answer 1

1/ Check CSS

You selected Iphone 6/7/8 format. If you select < body > or < html > tag in your inspector, and if your page do not contain CSS changing the default width and height of this tags, you'll see that the width of < html > of < body > tags is 375px, like the mobile frame you selected.

But, here your problem is that you selected a division with a #main identifier in your inspector. This division is larger than the screen size probably because of CSS rules. This should be fixed by using a rule like:

#main {
  min-width: 100%;
  width: 100%;
}

See how media queries work to make the content of your page responsive: https://developer.mozilla.org/fr/docs/Web/CSS/@media

2/ Check your viewport meta tag

You should also set a viewport meta tag, depending of your needings. Here is a common one, present on stackoverflow website by example:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">

Answer 2

In option you selected iphone 6/7/8 so you can't go lower then that viewport, to select mobile view you have to change option from iphone 6/7/8 to responsive or you can select diffrent mobile view options.