Jump to content
Killersites Community
Sign in to follow this  
antpower26

Pinch zoom problems on Ipod touch/mobile

Recommended Posts

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

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×