Jump to content

Pinch zoom problems on Ipod touch/mobile


antpower26

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

Link to comment
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/

Link to comment
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

Link to comment
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

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...