Rendering the Web Equally on Mobile Devices
I’ve been digging through the Interwebs for a while now and, I thought, had worked out all of the “kinks” of rendering on a mobile device—specifically iPhones.
The special ‘viewport’ meta tag means the world to iDevices.
meta name=“viewport” content=“width = device-width” />
I’m faced with a new challenge—the Palm Pre’s built-in web browser. My shiny new phone is great, but it isn’t without glitches.
The first glitch I’ve found appears to be a DNS issue— http://myserver/web won’t resolve; however, http://184.108.40.206/web will. It seems to be touchy. Most of our webs work just fine, others don’t. I haven’t narrowed it down to a single server or architecture as it seems to be a bit of everything. Wonky.
The next glitch is more important—the rendering. One of our tools is a simple form-based tool that looks great on the iPhone; however, renders partial screen and “garbles” when you move around the screen.
I’ve also found that anything in an ASP.NET Update Panel (like those Select buttons) are unusable. Other webs I’ve used (Bank of America, etc) use AJAX just fine, so I don’t think it’s that—probably a coding issue I need to dig into and resolve.
UPDATE: Explicitly adding “LoadScriptsBeforeUI=’true’” to the ASP.NET ScriptManager seems to help with this.. a little.
Anyone else worked specifically with the Pre devices and rendering? I’d appreciate any meta tags or layout ideas that worked. :) The Pre isn’t a common device in our organization—yet.