0

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

enter image description here

bignore59
  • 167
  • 1
  • 2
  • 8
  • 1
    Is this happening on every site you view? Or just your own site? If it's your own code, have you set the viewport? https://www.w3schools.com/css/css_rwd_viewport.asp – sallf Nov 18 '19 at 01:28

2 Answers2

2

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">
Ben
  • 536
  • 4
  • 12
0

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.

jignasha
  • 168
  • 3