I was having a hard time figuring out how to phrase this. Sorry if this is a noob question, I’m new to responsive design and mobile web design in general.
My phone (Galaxy s10e) will render my webpage as if it’s 360 pixels wide, with all elements positioned appropriately based on this width. I have several image tags on the site that are the same width. I was using src images that are 360px wide, and this looks fine on desktop because it is actually rendering my images at 360px, but on mobile the images alone appear to be rendering at a much higher resolution, causing it to look terrible due to upscaling.
If someone could explain to me what is happening here it would really help, since I can’t find information on this specific behavior. Some questions I have:
- Is the browser choosing to position the elements based on a 360px width while rendering the actual content at the screen’s resolution?
- How do I account for this in my design? I considered rendering the images at the higher resolution and then having the page dynamically scale those images down (so even though the actual div is 360px, the browser can use the ‘extra space’ allotted by max-width to render the image at a higher resolution), but I want the images to remain 360px wide on desktop, not the higher max-width for mobile rendering.
- Where can I learn all about this behavior so I know how to tackle responsive image scaling in the future?
Thank you for your time. Let me know if you have any other questions. I’m using ReactJS to develop the site.