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?
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.
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: yourimagename#2x.format. 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!
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.
Related
I am new to UI design, however a client wants an app ready for both iPhone 4s & 5.
I understand the iPhone 5 will create two bars if the image is not long enough. Many people said coding it at #2x will solve the problem. But I'm not sure exactly what that means.
Do I need to design two versions? What happens if I design only for iPhone 5? Will iPhone 4S users see a squished screen?
Thanks.
First, in a couple of months you'll have to support the iPhone 5's screen size. Apple have announced that it'll be a requirement soon.
Adding a Default.png of the right size is enough to enable an app to support the new screen size but is likely not enough. You'll also need to make sure that all your views resize to fill the screen. There's the old "springs and struts" method and the newer "constraints." There are tutorials you can search for -- Stackoverflow is not a good place for that kind of thing. You'll also need to update any images.
In short, try it in the Simulator and see what happens.
Using #2x is referring to whether or not the image asset is being displayed on a 'retina' screen. For example, if you had a 50x50 pixel image, the 'retina' (#2x) version would be 100x100. This is because 1pt (point) is equal to 2px (pixel) on a retina screen.
There are a variety of ways you can determine is it is an iPhone5 or iPhone4.
In the viewDidLoad, you could check the self.view.frame.size.height to determine which background image to load based on the height of the screen. This would require you to have two different versions of the assets (not including #2x versions), i.e. bg_iphone5.png & bg_iphone4.png.
There are other ways to accomplish this, and people have explained it better than I have here - search StackOverflow and you will surely find what you're looking for.
What happens if I design only for iPhone 5? Will iPhone 4S users see a squished screen?
Don't do this. Design for both.
I just started reading about Retina Display on the iphone 4+ and I would like to know if right now all these iphones4+ are displaying images 2x the normal size on web pages if you don't have a the imagefilename#2x.extension ?!
This would be a huge headache if I have to wrote all that extra code like media queries and add #2x after every background images...
If so, what are your swiftest solution?
Thank you.
The file name has nothing to do with your web site. You can name your image files anything you want. The '#2x' is just an informal standard many use for retina web images. If you want retina images to be used, you can use the media query to swap out the images via CSS with the higher resolution versions.
http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/
Mobile Safari interprets px as points and you therefore don't need to do anything for your app to work on a retina device.
If you want to provide high-res images though, wrap it in a CSS media query:
#media all and (-webkit-device-pixel-ratio:2) {
#id {
background-image: url(background#2x.png);
background-size: 100% 100%;
}
}
I have a website that requires a very large background image. The page loads correctly in all web browsers I have tried except the Safari on the iPhone and the iPad. In Safari on these two mobile devices the background only covers the left 50% of the page.
From all the testing I have done I can tell that is because of the length of the background image I am using. This is my css:
#bodyLong
{
background-image:url('/Images/TaylorProductsBackground3459.jpg');
background-repeat:no-repeat;
width: 1150px;
height: 3459px;
margin: 0 auto;
text-align: left;
padding: 0px;
position:relative;
}
I know that there is something specifically wrong in this case because if I make one change to the CSS and set height: 1000px;, the background image is no longer shown twice across the back of the page. What can I do to fix this? I would prefer not to use such a large image but it is a client request and I have not been able to convince them otherwise.
I think you are running hard into a limit of the iOS version of Safari. Check all the doco on creating web pages for mobile devices and you might find something about image size limits.
Check the answer here: Image size limitations in mobile safari?
Possible solutions might be to use a smaller image size and scale it up if detail is not important, or to break up the image and tile it.
But seriously, why would you need a 3500px sized image as a background. Bad idea(TM)
I know there has been some talk about large images not rendering well on the new iPad because of a limitation in WebKit. The workaround is to use progressive Jpegs. Try saving your image as a progressive Jpeg and see if that fixes the problem.
You need to make sure the image matches the screen resolution and you need to make sure you retina and non retina sizes
I currently develop a website in mobile safari. I am stuck on a problem that the text shadow behavior in iOS5 and iOS4 is completely different such as the blue effect. And the result of text shadow position is also different between iPhone 3G (non-retina) with iOS5 and iPhone 4 (retina) with iOS5. CSS code is "text-shadow: 0 1px 1px #ffffff". Can someone tell me how to fix this issue?
I've just come across this - I had an App rejected from Apple due to the difference with the way Io5 displays text-shadows. Text shadows which previously looked fine now appear to display badly in Io5, creating blurry textm and as a result the app failed Apples Human Interface Guidelines.
It would appear to suggest that text shadows, at least ones on dark text on a light background, can no longer be used on iPhone apps.
As thirtydot suggested, there is nothing you can do about this. This is the way safari renders your html and css.
The only thing you could and should do is file a bug to apple. Go to http://developer.apple.com and check where to file a bug about this.
I've noticed css sprites seem to show 1 more pixel than they should when viewing them on the iphone. My site works perfectly fine on all major desktop browsers on mac and PC. But when I view it on the iphone you can see 1 pixel of the adjacent sprite image.
Anyone encounter this before? Any suggestions on how to cleanly fix this? I know I could just modify all my sprites to have more separation in between them, but is there an easier way?
UPDATE: Tested zooming with safari, and noticed the exact same problem occurs at certain zoom levels on desktop safari
Better late than never:
It's not a bug or a software flaw, it's simple mathematics: the (older) iPhone displays websites at 980px width on a screen that is 320px wide (in portrait mode).
So it's a rounding issue: let's say an element is 50px wide. It is displayed at roughly a third of its size, and that is causing the problem: the iPhone will display it at either 16px or 17px width. Even if it was exactly one third, the problem would remain, and the same applies to various zoom levels, of course.
If it's 16px, you're fine - you have probably noticed that the issue doesn't occur on all your elements. If it's 17px, it means that the element is displayed slightly larger than intended, and the adjacent sprite will show.
I checked apple.om on an iPhone 3G, and even their navigation bar shows some odd little artifacts at the bottom - they're just barely noticeable.
So in theory, it should be enough to add 1px around each sprite. Having to change all these elements is a bummer, but it seems to be the best solution. The problem isn't likely to go away either - the iPhone 4 obviously still scales things down, at least in portrait mode. Not to mention all the other smartphones out there with far inferior screens.
Add another 1px of space between the icons.
.:edit:.
Just noticed that this was one of your proposed solutions. Check the elements with the sprite and make sure that they are the right size. (Double check the rendered border-box model in Firebug).
It could have something to do with how the mobile phone renders items.