MacNN Forums (
-   Art & Graphic Design (
-   -   iPad web design trouble (

PeterParker Dec 13, 2012 06:08 AM
iPad web design trouble

my parents are about to getting an iPad for christmas I think, but... I have a problem with their website. I didn't really know that, but the web on the iPad seems to be a bit different. I didn't really ever notice any difference, I had rather thought it works really great, and the web was mostly what I expected it to be, but... I tried to google and there seems to be some more technical debate on how to do it - it's an open secret you rediscuss your design in general, but that's not what I meant.

So, this website:

On the Mac, or on any desktop computer and browser for that matter, there is this sort of "paralax effect" - so there's a background image and a foreground layer that scrolls holding the background fixed. It's cool for this sort of blog, I thought.
But with iPad, this won't work, the iPad Safari browser simply ignores the command, and everything goes weird.

Any idea? What to do? A Safari bug? A quick workaround?

besson3c Dec 13, 2012 06:42 AM
Usually you can simulate the experience on an iPad or iPhone by simply making your browser window smaller, but you can also simulate the site on any iOS device using the iOS simulator.

Having a fixed position background-attachment is supported under iOS ( so off the top of my head I'm not sure what is going on here. Usually CSS targeting smaller viewports can be isolated by making your browser window smaller, like I said...
andi*pandi Dec 13, 2012 09:52 AM
You need to simulate your site at 768 px and 1024 px wide- as besson says, most browsers have a way to do this. Try Opera, it has a "view at full width" option that responds to changes. Firefox with Developer Tools plugin has a "view responsive layouts" which will show you different widths at once. The ipad does a pretty good job of squeezing most sites down to viewscreen but preferably you can use CSS media queries to tell the page to display differently at different widths. For instance, for a vertical ipad page, you may want to stack the columns, with the left column shifting on top. Make the graphic shorter. etc.
All times are GMT -4. The time now is 10:45 PM.

Copyright © 2005-2007 MacNN. All rights reserved.
Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2017, vBulletin Solutions, Inc.

Content Relevant URLs by vBSEO 3.3.2