New API’s are developing (and are currently available)! screen.orientation.lock(); // webkit only and screen.lockOrientation(“orientation”); Where “orientation” can be any of the following: portrait-primary – It represents the orientation of the screen when it is in its primary portrait mode. A screen is considered in its primary portrait mode if the device is held in its … Read more
For Android, I think the best place for you to start would be here, it has a lot of information including standard screen sizes and how to display images while keeping them in the best possible quality. http://developer.android.com/guide/practices/screens_support.html I’d also suggest doing as much image manipulation as possible on your server. Images are a pain … Read more
Sencha Touch is an application framework (you create your interface programmatically through Javascript) while jQuery Mobile is more of a mobile enhancement library (you write regular HTML for your content, then add jQuery mobile for transitions/animations). jQuery Mobile has an easier learning curve, but Sencha Touch can better simulate “native” apps.
The simple answer is: viewport is good, the others are… less good. viewport viewport is a widely supported de-facto standard – originally created by Apple for mobile Safari on iPhone, it’s been adopted by almost all other mobile browsers: Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox Simple example use case: make the site … Read more
You can fake the title tooltip behavior with Javascript. When you click/tab on an element with a title attribute, a child element with the title text will be appended. Click again and it gets removed. Javascript (done with jQuery): $(“spanTooltips for mobile browsers”).click(function () { var $title = $(this).find(“.title”); if (!$title.length) { $(this).append(‘<span class=”title”>’ + … Read more
Simply add this CSS: html, body { overflow-x: hidden; } body { position: relative }
EDIT: Because this keeps getting commented on, we all know that we shouldn’t do this. The question was how do I do it, not should I do it. Add this into your for mobile devices. Then do your widths in percentages and you’ll be fine: <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” /> Add this in … Read more
Yes, any unsupported type will revert to the ‘type=text’ format. I found a good page which lists out all the existing input types. I tried looking at it from different browsers, a bit interesting. Don’t know if it will help you or not. http://miketaylr.com/pres/html5/forms2.html
This solves the issue when you scroll past the beginning or end of the div var selScrollable=”.scrollable”; // Uses document because document will be topmost level in bubbling $(document).on(‘touchmove’,function(e){ e.preventDefault(); }); // Uses body because jQuery on events are called off of the element they are // added to, so bubbling would not work if … Read more
All three of these were helpful tips, but it looks like I needed to add a meta tag: <meta content=”width=device-width, initial-scale=1″ name=”viewport” /> Now it seems to work in both Android (2.2) and iPhone all right…