0

What I should I do for the better image resolution when testing my website in various devices without the need for scrolling? Also in my Galaxy S4 device, when I load the website, the images are much tinier than that of in an iMac or macbook and when I flip the Galaxy S4 , I need to scroll down to be able to see the whole image. Is there any fix to this? Here's the code:

<meta content="width=device-width, initial-scale=1" name="viewport" />
<p align="center"><img src="https://uwmadison.qualtrics.com/CP/Graphic.php?IM=IM_cC6sFD6iBTxdHql" style="height: 470px;" /></p>
<style type="text/css">/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    img { max-width: 100%; }
}

/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    img { max-width: 100%; }
}
/* samsung */
@media only screen and (min-device-width : 320px) and (max-device-width : 321px) {
    img { max-width: 100%; }
}
</style>
Mona Jalal
  • 34,860
  • 64
  • 239
  • 408
  • On your Galaxy S4 the images tinier because of less pixel-ratio than on retina display. At least it seems so. Answered here http://stackoverflow.com/questions/4800467/retina-display-images-on-iphone. – knitevision Jul 01 '14 at 19:49
  • What about the flipping the device situation? – Mona Jalal Jul 01 '14 at 19:51
  • 1
    Setting `max-height: 100%;` should help to not having to scroll down.. – LcSalazar Jul 01 '14 at 20:04
  • Is this a good code in general if we are not planning to support iPhone and just Galaxy phones? – Mona Jalal Jul 01 '14 at 20:07
  • @LcSalazar even though I set the max-height to 100% for landscape, when I rotate my phone screen, I just see like 30% of the whole image! Any idea how to fix this? – Mona Jalal Jul 02 '14 at 21:19

0 Answers0