We Keep Coding

online html5 IDE that works on iPhone

Is there a cloud/web based online HTML5 IDE or playground of some sort that let's me play with JavaScript, JavaScript libraries, HTML and CSS3 using an iPhone (or any modern mobile device for that matter)?
I am looking for one that let's me quickly test stuff while I'm on the go.

It seams that Tinkerbin.com works on iphone (I've just tested it).
This is not ideal but it runs.

JS Bin
Rendera
(One of the most popular alternatives, JsFiddle didn't work for me under iOS.)

Getting a web-font to work on an HTML5 Windows Phone App?

I'm building a Windows Phone 8 HTML5 app that shows an external website on the web. When the page loads, it shows all the content along with the correct css styling except for the web font. The web font is not included in the project, it is run from the website online. Also, I know javascript is running because other javascripts are working on the page. Does anyone know a solution to get web fonts working inside apps? If it helps, when I direct the main web browser in Windows Phone 8 to the webpage in question, the webfonts load fine.

Custom fonts can be used in Windows Phone 8 HTML5 apps in the same way as they are used on websites and other mobile platforms' webviews. There are two things to watch out for,
Within Visual Studio make sure that the font's Properties>Advanced>Build Action is set to "Content" so it is copied to the device when the project is built and deployed.
Make sure that the font you are using is licensed for embedding and that the embeddable flag in the truetype font is set to 0 to allow embedding. iOS and Android ignore this embeddable tag but IE10 respects it.
You can inspect the embeddable flag of any truetype font using the open-source TTFEdit. You can make a font embeddable by changing the value in View>Show>Advanced>Legal rights for embedding to 0 and re-saving it. Only change the flag if the font is licensed for embedding.
I've tested with a number of truetype fonts with no problem. My only issue so far has been when including the font-awesome library where the src: values in font-awesome.min.css needed changing to fix a bug in IE10 mobile. When using font-awesome,
src:url('../fonts/fontawesome-webfont.ttf?v=4.0.3') won't work. src:url('../fonts/fontawesome-webfont.ttf') will.

CSS mobile media styles with manual toggling

So I'm trying to build a mobile and desktop version of a website simultaneously (using a MediaWiki engine, if anybody is interested). Since I don't have much experience with mobile device building, I was looking around for some good mobile development practices. In the end, I feel media queries are good for what I need to do, mostly because double-publishing on separate domains (like m.foo.com vs foo.com) is not possible for this task.
The shortcoming to CSS media queries, it seems, is the apparent inability for phone users to view the site in desktop format whenever they want to (Google or YouTube is a good example of this when accessed using a phone).
Is there any way for me to freely toggle between desktop and mobile stylesheets developed with media queries? Would using javascript be too bulky for a mobile device to download?
I appreciate any suggestions. Thanks!
EDIT: For clarification, yes, I want to click a link or button on the mobile style to switch to a desktop style.

I'm 90% sure that it is not possible with CSS alone but can easily be accomplished with PHP or Javascript. It shouldn't be too bulky to use javascript.
Some examples
PHP Style Switcher.
Javascript Style Switcher
Jquery Style Switcher

Raphaeljs library and SmartPhones

I used the worderfull javascript library called raphaeljs on my website to draw maps, animations and animated functionalities. I have noticed that the script using this library work perfectly with iPhone but not with Android.
Can someone confirm this (just going on the demo page of raphaeljs will tell you if it works of not) and if it doesn't, does someone has any idea why, and what could be tested.
Thanks

The default Android browser did not support SVG until they recently re-introduced it with Android 2.3. One workaround is to use Opera Mobile (free from the Android Market) which will work whatever the Android version.
EDIT: My mistake, it's Android 3.0 (Honeycomb) that added SVG support in the default browser.
2ND EDIT: Better add a disclaimer that I work for Opera. There may be other non-default browsers that support SVG (but I haven't tried them).

Actually SVG is supported by Android since 2.0 I think (with WebKit, default browser), it's just not enabled by default : http://jindroid.com/2010/02/15/svg-support-on-android-webkit/
There's a patch you can apply (quite hard to do though) to enable it but I would advice you to download Opera or Mozilla Firefox for Android (via Market), which also supports svg quite well (I tested FF4 with Raphael JS).
Regards

What are the quickest and easiest ways to ensure existing web pages display well on mobile platforms?

The pages in question contain a lot of javascript and CSS. How well are these supported by mobile platforms generally?
Is there a browser emulator (or equivalent tool) to assist testing?

Opera has an option to view pages as through a mobile device. I've found it useful in the past.

I can tell you that Apple's Mobile Safari on the iPhone renders Stack Overflow perfectly, which I find rather amazing.
This is a site for programmers, not average users, so we accepted a lot of JavaScript dependencies.
I do wish more mobile devices had browsers as powerful as Mobile Safari. I hear good things about Opera Mini as well.

One example:
The standard BlackBerry browser on my BlackBerry 8130 (Pearl) seems to ignore both CSS and JavaScript when loading my home page.
I also installed Opera Mobile on this device, which renders the CSS but not my jQuery hover effects. It does understand some jQuery - for example, I have a form validation that does a show() of error messages if validation fails. That works in Opera, although without the animation effect.
The safest thing to do for mobile browsers is to design pages that degrade gracefully without JS or CSS. It's up to you whether that's worth the effort or not.
In a few years, hopefully the only rendering differences will be the screen size limits of the phones.

You can install Opera Mini on an emulator like the Java WTK and test mobile rendering on a PC. One drawback is that Opera Mini still works through a proxy, so debugging local files/sites won't work - you have to upload your site to a world-accessible server.
Just google it.

It depends entirely on the phone. If you want to support every single device out there, don't even bother with CSS or JavaScript since neither will work (or will do something completely non-standard) on 99% of devices. If you are only targeting high-end devices, like the iPhone or the latest Series 60 Nokias, you should be able to get away with limited JS and CSS.
Some browser emulators that I know of:
Openwave.
Nokia tools
There are many more manufacturers that simply do not have any tools at all (I dare you to try and find a developer site for LG) so you need to get access to the physical handsets if you want to be sure the site appears as it should.
DeviceAnywhere is a superb tool if you have the cash. It was extremely laggy the last time I used it about a year and a half ago. Plus it is pure Java so is a dog on any machine. But it is arguably the single best mobile development tool available and, believe you me, I've tried a lot.

BlackBerry devices with OS 4.5 or older will not handle Javascript or CSS very well, if at all. Devices with OS 4.6 and higher (Bold, Pearl Flip, Storm, etc..) come with a new rendering engine which has much better support for Javascript, DOM, and CSS. It's not perfect but it should render most pages quite well. You can download the BlackBerry simulator for these devices from their developer website and try it out. Since it runs the same code as on the actual device it's an excellent representation of what you can expect to see on-device.