CODEWITHSUNDEEP
iphonecssmobileresponsive-design
Morgan Kay
Morgan Kay

Reputation: 308

One page of responsive site is blurry/fuzzy on iphone

Here's a weird one. I'm developing a responsive site here:

http://74.209.178.54:3000/index.html

There are three pages built so far: the home page, the "Why" page, and the "Pricing" page. The Home and Why pages are just fine on my iPhone 4. The "Pricing" page is really blurry. And I don't just mean the images are blurry - absolutely everything is blurry: text, borders, backgrounds...

Has anyone seen this before? Do you know what's happening?

Upvotes: 0

Views: 784

Answers (3)

Morgan Kay
Morgan Kay

Reputation: 308

The problem mysteriously went away - I have no idea what actually happened. The people who answered the question saw the site when the problem was gone.

Upvotes: 0

babygirl
babygirl

Reputation: 73

This code in your CSS is causing the problem :-

#logos, #seen {
   border: 1px solid #bbbbbb;

(around line 909 or 751 according to the comments.)

As you can see that the #logos is being used on the Pricing Page & the border given to it is on all of the sides - The page width is increased by 2px. Then the iPhone zooms in on the whole page when opened and blurry page stuff happens.

I'm pretty sure you know what to do but here goes :-

#logos, #seen {
   border-top: 1px solid #bbbbbb;
   border-bottom: 1px solid #bbbbbb;

I haven't actually tested this on a retina display iPhone but it should work.

Upvotes: 1

joan2404
joan2404

Reputation: 315

The problem is the retina display of the iPhone 4. I had a similar problem when loading 2 buttons, they looked blurry (much more than your website) on the iPhone 4 but looked great on my 3gs (as well as your page). I have no idea what do you have to do to support the iPhone 4 retina display on your website, but i'll explain how works when programming in Xcode:

If you want to support retina and non-retina devices, you must have 2 versions of the same image. I recommend you to create first the retina image because it's easier to reduce (search on the Mac App Store for "resizer"). Well, the retina image must be named as that: [email protected]. Your non-retina image, like that: yourimagename.format. Then, add both images on your project and when you want to load it, load the non-retina version. If the app is running on a retina device, the program will load the retina images.

That blurry effect is caused because the text is rendered in retina, and the images not. It's not a problem of images, it's just a problem of the resolution of the image. The retina images is 2x the size (width and high) the non-retina image, so the non-retina is the half of the retina. At first can seem a bit confusing, but you'll see that it isn't at all.

Hope I helped you. If you need some more help just ask!

Upvotes: 0

Related Questions