4

I have an image element in an html body which width is 440 px and height is 840 px. Everything works as expected until I open the chrome debug mode to simulate it display in mobile device.

screenshot with body width

As the screenshot shows, the simulator suppose to 375 px width. But is somehow become 964 px width. There is no any extra css script or js script there. Just a simple html with one image.screenshot with image width

Martin Ma
  • 55
  • 1
  • 7

2 Answers2

5

We found that you need to have the following in your header:

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

There are more details about it here: www.sitepoint.com/media-queries-width-vs-device-width/

John G
  • 88
  • 1
  • 8
  • It would be more helpful to provide those details here, especially in the event that the link breaks... – phalteman Sep 06 '19 at 20:59
1

According to your screenshot chrome is showing the correct device size which is 375 x 812. It would have been better if you clicked on the img in your screenshot. So not exactly sure what you need. It appears the issue is with the image. If the width of your image is 440px try this in your CSS.

@media (max-width: 480px) {

 body img{
   max-width: 100%;
 }

}
Becky
  • 5,467
  • 9
  • 40
  • 73
  • 1
    Chrome is showing the correct device size. but if you look at the right down corner, the actual size of the body is 964 px width. – Martin Ma May 05 '19 at 13:36