On “retina”/high DPI:

• SVG sprites are a beau­ti­ful thing. Make the can­vas size work at a device ratio of 1, and capa­ble user agents (read: mobile Safari) will do the hard work for you. Don’t cre­ate a double-resolution sprite, because you’ll need to man­u­ally re-declare all your siz­ing and posi­tion­ing, which is no fun.
• Opera sup­ports SVG but doesn’t bother to scale it. In most cases, this means a well-quantised PNG is going to be smaller.
• Opera’s device-pixel-ratios are actu­ally expressed as ratios (x/y), as opposed to floats (1.5). I actu­ally think this makes a lot of sense, though I’m pretty sure they’ve already lost this battle.
• Mozilla/Fennec doesn’t do ratios in a stan­dard way, either — their syn­tax is “min – moz-device-pixel-ratio”. They obvi­ously missed the part where browser pre­fixes are sup­posed to be, well, pre­fixed. This was done back in late 2010 and they looked at the –webkit imple­men­ta­tion first, before imple­ment­ing it in a very dif­fer­ent fash­ion with­out much debate. It’s a mind-bogglingly undis­cussed issue on Bugzilla and the wider Internet.
• Android DPI val­ues for DevicesY­ouKnowAbout™ hover around the 1.5 mark. Any­thing lower than this and the device capa­bil­i­ties prob­a­bly don’t make it worth­while, and any­thing higher is prob­a­bly an iPhone. Higher res­o­lu­tion Android devices just don’t seem to exist, or, for the most part, report them­selves as exist­ing (March 2012 — yeah, the Nexus and Galaxy S2 and stuff are big, but don’t seem to be doc­u­mented as report­ing high DPIs).
• Okay, so DPI val­ues aren’t quite that sim­ple. To quote A List Apart, “we don’t know what each device con­sid­ers a pixel and this is a prob­lem.” Read about it, test lots, buy Android devices if you want to be sure.

Mis­cel­la­neous gotchas:

• Cer­tain Android vari­ants — I don’t have enough devices to test con­clu­sively — drop gra­di­ent back­grounds, opac­ity etc. (pre­sum­ably for per­for­mance rea­sons) despite hav­ing “A grade” capa­bil­i­ties in a lot of other senses. Make sure you do sim­ple things like hav­ing back­grounds and bor­ders on ele­ments that would have pre­vi­ously been divided by gra­di­ent con­trast. Your fea­ture­phone vis­i­tors will also thank you. In an ideal world you’d prob­a­bly pro­gres­sively enhance these kind of things, rather than patch­ing it up after­wards, but it’s easy to get caught up in the excite­ment of only need­ing to sup­port “A Grade” browsers (accept­ing that IE is suit­ably ban­ished from Mobile land) and just for­get. Don’t forget.
• Beware HTML5 man­i­fests — they raise stor­age prompts that could scare some users in some browsers (“why is this site stor­ing info about me?). They’re also actu­ally not that effec­tive unless you pin an app to the home screen, so recon­sider your need to use one.
• Fen­nec uses left/right swip­ing for access­ing browser UI. This is a pretty dumb design deci­sion, because it breaks left/right swip­ing ges­tures (think photo gal­leries). Expose an alter­na­tive UI (Next/Prev but­tons per­haps?) for browsers that don’t do touch events in this way.
• Win­dows Phone 7. You’ve heard good things, right? Kinda. It’s def­i­nitely up there, but early ver­sions of this device (2011) had a browser that was more or less equiv­a­lent to IE7 with a few IE8 fea­tures thrown in for good mea­sure. I’m not both­er­ing to sup­port it. How­ever, even the lat­est ver­sions (March 2012) don’t sup­port touch events (!) so expect it to be even worse than Fen­nec for con­ven­tional swipe-driven mobile UI in the browser. It does have Can­vas sup­port, but appar­ently lacks SVG in the browser.
• SVG gra­di­ent sup­port is patchy (prob­a­bly for sim­i­lar rea­sons Android devices choose not to ren­der CSS gradients)

Tips:

• Use text-rendering: opti­mizeLeg­i­bil­ity; on head­ings as it does great things on the iPhone 4. (via Men­ac­ing Cloud)
• Flash ads work. This is stag­ger­ing, but true. Expect that Android devices will suc­cess­fully dis­play Flash ads, and pay atten­tion to dif­fer­ent markup that gets adserved for these devices as it will pos­si­bly impact your CSS.
• Image based ads scale down quite well. It’s tricky get­ting mobile inven­tory smaller than 300px wide, but if you’re expect­ing 240px devices then just use max-width:100% for this. It’s bet­ter than break­ing the lay­out or not serv­ing ads to these screens, not that there are many of them left.