|
|
iPad web design trouble
|
|
|
|
HamSandwich
|
|
Hey,
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: http://atelierkunterbunt.net
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?
Hmm,
Pete
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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 (http://www.w3schools.com/cssref/pr_background-attachment.asp) 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...
|
|
|
|
|
|
|
|
|
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|