images on iphone 5s stock browser

User 283347 Photo


Registered User
388 posts

my site (still a work in progress) at gsh.coffeecup.com looks right (mostly :) ) on my android phone, my wife's android phone, and her android tablet...but on my daughters iphone 5s stock browser.. the images are totally blurry and they appear to be almost zoomed in????

She says everything is up-to-date on her phone. She was leaving so we could not dissect the problem at the time.

Any ideas??? Is there a code snippet or something?
User 2273654 Photo


Registered User
772 posts

I do not have any devices to test the responsiveness, so I use this application and it tests things very well as far as I know.
https://www.responsinator.com/
My CC S-drive site https://workhorsepainting.com
User 187934 Photo


Senior Advisor
20,245 posts

Those background images are messed up on my iphone 4s.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 283347 Photo


Registered User
388 posts

Thanks, guys. It seems it is something to do with retina display on iphones. I have read a lot of opinions on whether or not there is a good fix...looks like there is some css that might work. https://css-tricks.com/snippets/css/retina-display-media-query/

I'll give that a try and see what happens...based on all the comments below the snippet it may or may not work.
User 187934 Photo


Senior Advisor
20,245 posts

That's funny because I was just reading some of the same stuff.
http://paulstamatiou.com/responsive-retina-blog-design/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 271657 Photo


Ambassador
3,816 posts

I don't have an iphone, but just looking at the site on my laptop and adjusting the browser size, the background images get squished (width-wise, so look distorted) at small screen sizes – rather than adjusting to fit the available space.
Maybe they look worse on iphones when that happens?

Might want to try adjusting the CSS properties? http://nicolasgallagher.com/flexible-css-cover-images/

I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 283347 Photo


Registered User
388 posts

Thanks for the feedback and link, Paintbrush. I'll check it out.

They looked squished on my desktop and laptop, too, when I shrink the screen, but on my phone (android) they look good.
But the problem I do have is that they are not centered...meaning the picture reduces in size but you don't see the middle of it you see the left center...on a tablet they still are centered...on ours anyway.

The iPhone issue is retina display related I'm still trying to figure that one out. I cant test it as I don't have an iPhone. So I fiddle around with it and check it when my daughter is here.

Any help on the centering issue is appreciated. :)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.