iphone / ipad compatible web design - resources?

MuGeN

MuGeN

MuGeN

Associate
Joined
21 Oct 2008
Posts
1,679
Location
Mooching... in your house
hi guys,

wondering if anyone can recommend a decent reference site to help me get round the quirks of iOS safari?

on the whole there are no problems, but there are some bits and bobs I don't understand such as the "hairline bug":

20100807-qj5h163jan55hpx8x3835b6sf3.jpg


this is the one that sticks out in my mind, adding in tiny gaps where they are not wanted...

anyone offer any assistance? recommend a decent reference?
 
It's an interesting read, but for now I'm trying to find why lovely well written CSS displays issues like above and how to get round them...

Tbh I'm more than happy with browsing full sites from my iPhone never mind the iPad so I'd prefer not to write whole new layouts if I can learn how to tweak the proper ones to look perfect :)
 
Just used media queries to add the tweaks needed to get rid of the gaps. No need to write a whole new stylesheet if you don't want to.
 
that particular bug is what annoys me... i have no idea how to tweak it away since its not actually an offset pixel or anything (if you zoom in a bit, it disappears, a bit more, it comes back) and its always a hairline never gets thicker - yet if you are working from a sprite (multiple graphics in one file selectable with background-position) you do see some spillover from neighbouring graphics :(

20100810-hijw2nc61ai2b21tkp82pgcc7.jpg


Heres the issue on the ocuk site (its apparent on pretty much all sites you can go on...) so i'd love to know what the fix is, dont mind using separate stylesheets or whatever I just want a way around it...
 
Ah, so it's a browser/device dependent rounding error issue.

If pretty much every site has it, then users are expecting it, or at least tolerating it as a side-effect of browsing on their iPhone.

Use media queries either within your CSS, as mr.sly points out, or use them to feed a different stylesheet optimised for the iPhone that uses a more iOS-friendly method, dimension specification. Can't really get more specific unless you do the linkage.

You may want to consider using a vastly different, mobile-optimised presentation, rather than a straight-ahead presentation of your 'desktop' site, if that's how you're currently doing it. Something more 'single-column, vertical' so that users can scroll with one hand. As long as branding's consistent, it's not going to scare any users away. In fact, they may love it more when they realise they don't have to go through the usual 'pinch, drag, pinch, drag' navigation rigmarole just to read some text.

EDIT: anyway, here's another related link that may or may not help: http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript
 
Last edited:
MuGeN said:
that particular bug is what annoys me... i have no idea how to tweak it away since its not actually an offset pixel or anything (if you zoom in a bit, it disappears, a bit more, it comes back) and its always a hairline never gets thicker - yet if you are working from a sprite (multiple graphics in one file selectable with background-position) you do see some spillover from neighbouring graphics :(

20100810-hijw2nc61ai2b21tkp82pgcc7.jpg


Heres the issue on the ocuk site (its apparent on pretty much all sites you can go on...) so i'd love to know what the fix is, dont mind using separate stylesheets or whatever I just want a way around it...
Click to expand...

Does this fix it:

Code: 
-webkit-background-clip: padding-box;


http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
 
hmmmmmmmmm

this certainly seems related, although its not always when there are rounded corners... it happens all over the place when viewing sites on my ipad or iphone...

i think, that it is an iOS Safari bug that this settings happens to fix...

investigating...
 
right... had a good play...

this setting does not fix problems such as above, however, it does help (but not completely eliminate) when sprites are involved...

see here on a popular shop, they are using sprite based graphics (as do a lot of sites):

20100810-bkcii532b2aet7jwqckahpt7w1.jpg


(as viewed on my ipad)

the problem shown here, i'm sure, would be helped (when i say helped, the problem is lessened, but the lines still pop up at certain zoom levels) by the "-webkit-background-clip: padding-box;" parameter...

so... when its not sprite based, and just looks like non seamless joins between objects on the page, i still have no answer, but when its a background-position controlled sprite element, the webkit code helps.

c'mon folks lets sort this bugger out cuz its making our sites look bad on devices that are getting ever popular!
 
Last edited:
Apple themselves said:
When zooming in and out, the user changes the scale of the viewport, not the size of the viewport.
Click to expand...

http://developer.apple.com/safari/l...ontent/usingtheviewport/usingtheviewport.html

In other words, scale is a master zoom level that all elements are multiplied by. By default, the scale is 1.0 - fine and dandy, as 250px * 1.0 is a nice round 250px.

The problems occur when the user pinch-zooms to an arbitary scale, e.g. 2.333. Then the 250px becomes 583.25px. And I think I'm right in saying that "px" in the mobile world doesn't refer to actual hard device pixels, but soft pixels, which the device has to interpolate to display. This would be why you get soft hairlines rather than hard, definite 1px hairlines, at certain zoom levels.

I don't have an iOS device to test this suspicion, but I think you can confirm it by using the viewport meta tag:

Code: 
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">

Try different values of initial-scale to see whether hairlines appear at certain values. If they do appear, are they an identifiable colour [e.g. the body background colour], or something unspecified in any CSS?

This doesn't provide you with any sort of solution, I know. But it may lead to conclusions which point to one. Possibly. It's still all a bit arcane, this mobile malarkey :D
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom