antpower26 Posted September 1, 2011 Report Share Posted September 1, 2011 Hi, I am currently developing a site for a client, and testing on the Ipod touch, a problem I am having is with the pinch zoom capability. The content on the mobile is too small to read when the site loads, so when I pinch zoom to test the legibilty of the content the background image, doesn't stay constant and the content is unreadable. Here is my code for the body selector in the css : body { background-image: url("images/background.jpg"); background-position:center; background-attachment:fixed; background-size:100% 100%; background-repeat:no-repeat; margin-bottom:500px; } Is there some code which can fix this problem and keep the background more fixed when the pinch zoom is being used. Here is the url of the test site if anyone is kind enough to take a look: http://www.cambrianvacation.co.uk/rosettafire Thanks:) Ant Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 1, 2011 Report Share Posted September 1, 2011 I'm not noticing any issues with the website, other than that the background doesn't stay in one position, but doesn't stay fixed. If you do a search for "background-position fixed iphone" (or ipod or whatever) you'll notice that this is something that is an issue, since the iphone/ipod handles displaying websites differently than computer based browsers. As far as I understand it, when you scroll on the iphone/ipod, you aren't really scrolling, but simply moving the entire viewport to the website, not just the specific content on the page. You'll have to do some research to see if there is a fix for it... I saw comments about faking it using javascript or CSS3 animations or similar, but I don't think it's worth the trouble or time personally. http://blog.mspace.fm/2009/10/01/iphone-mobile-safari-css-position-fixed/ Quote Link to comment Share on other sites More sharing options...
antpower26 Posted September 1, 2011 Author Report Share Posted September 1, 2011 Thanks Ben through your link I came across this jQuery hack : //stick the footer at the bottom of the page if we're on an iPad/iPhone due to viewport/page bugs in mobile webkit if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') { $("#footer").css("position", "static"); }; Seemed to do the trick:))) I just changed #footer to body. Ant Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 1, 2011 Report Share Posted September 1, 2011 Glad to hear that it was a relatively easy solution. Quote Link to comment Share on other sites More sharing options...
antpower26 Posted September 2, 2011 Author Report Share Posted September 2, 2011 Yeah it's fine in iOS but actually the problem is there is android. I have a htc desire to test with running 2.2 and when I pinch zoom with this the user experience isn't that great Also in comparison to the iPod experience Androids webkit seems to render the site smaller, for example the homepage looks good with iOS but looks odd with Android, is there any way you can change the viewport for the android to render the site bigger, and is there any way to solve the said problem of pinch zoom non static background with Android. Thanks Ant Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 2, 2011 Report Share Posted September 2, 2011 You'll have to do some research on Android -- I don't have access to an Android phone, nor really know anything about that to be honest. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.