Android seems be to be increasing the clickable area of a submit button on an HTML form I'm working on. It's as if there's about 25 pixels to the right of the submit button that are also tap-able. This is problematic because, in my design, to the right of the submit button is an <A> element with an event handler bound to it. Tapping the <A> often submits the form instead of firing the event handler. I'm doing most of my testing in Browerstack and some on real hardware. The problem exhibits in (virtual) devices with lower screen widths (e.g. 320px), and seems to be there in Android 2.3 and 4. The same pages in iPhone (4s, iOS6) and Blackberry (v7) don't exhibit the problem.
Here's a CodePen example, and a single file version of the same code for easier viewing on mobile
Has anyone else seen this? Is it a feature? A bug - either in Android or in my code?
have you tried applying a reset.css to it? It seems to be an android webkit issue.
Also, try to use 40px areas for tap buttons.
I recommend using the reset.css stylesheet provided by meyerweb.com. It removes (almost) all styling that browsers would apply, but you may find you need to rework a lot of css and put a lot of stuff in such as <h1> tags.
CSS Tools: Reset CSS
Related
I have a website with the following configuration:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=5.0;minimum-scale=1.0;user-scalable=1;" />
and a div element with the
<div style="position:fixed;top:0;left:0;width:100%;height:40px;">Fixed Header Content</div>
(you can find the example here: http://massmatics.de/demo/test.html)
When watching this site on iOS and zooming, the size of this element increases but is getting out of the zoomed area.
When performing the same action on android (tested on a Nexus Tablet with Android 4.x) the fixed element disapears while zooming but when this action is finished it appears in a increased version on the zoomed area.
I think the behavior of chrome is right, but my question is now:
Is there a way to get the same behavior on android as on iOS?
The reason why I am asking is that I have a lot of content on the page which should be zoomed when viewed on a small device, but on Android the enlarged fixed element is taking all the space so zooming is not really a advantage.
Best regards
Update: I added a JS Implementation of the position:fixed to my example (with bad performance, I know, just for testing purposes.) - still the same behavior as with position:fixed. Is there an event whether the user zooms the page?
position:fixed support was just added last year in iOS5 - and from my experience, Android handles such elements inconsistently.
I believe the only predictable way to accomplish what you are trying to do is to wire it all up with JavaScript. Probably not the answer you were hoping for, but position:fixed is rarely the right solution on mobile anyway.
The Android Webkit browser (tested on 2.2, 2.3, and 3.0) seems to behave in weird ways when modal elements are put one above the other. In this example here
... I'm displaying a jQuery UI date picker with z-index 200, a gray overlay div spanning the whole document height and width with z-index 199 and behind all that is the regular form.
In the example above, I have clicked on the dropdown control for the year where it says 2011. Instead of selecting that dropdown, the focus went on the textarea element way below the gray overlay.
NOTE: This doesn't happen with a desktop Firefox browser, or with the iPhone Webkit browser.
Any idea what's wrong?? Or how to work around this issue? I want to avoid modifying the form (e.g. disabling all elements, while the overlay displays)...
It seems that this is actually a known issue in Android. It's supposed to be fixed, but I can't confirm that. In any case, starring this issue would be nice, thanks!
http://code.google.com/p/android/issues/detail?id=6721
http://code.google.com/p/android/issues/detail?id=26255
I built a complex forms over data mobile application and am now looking for a solution to persist the position of the title and the footer bar. In my dummy, which has been developed and tested with Chrome and Safari on my desktop, I just positioned the header and the footer absolute, as well as the content section, which height is set by JavaScript on the windows' resize event.
That's not a proper way for the mobile world, because overflow:auto isn't supported on mobile WebKit.
I tried some things by my own and I took also a look at iScroll. In fact, iScroll crashed safari on my iPad while the application without that component runs quite smooth. I have a lot of relatively complex forms, which may be a challange for iScroll, which can't be won I think.
So I am looking for other ways to achieve my goal (persist header and footer) without letting the user use two fingers for scrolling (in fact, almost nobody knows that "trick").
Any suggestions?
Thanks!
So there are three commonly mentioned solutions:
iScroll
YUI ScrollView
Scrollability
They're all very neat for scrolling through simple lists. But no one really works if it's purpose is to handle full pages with more than just a list, for example complex dialogs with dynamic forms and so on.
I just decided to give up and wait a year - Apple has lately announced its support for position:fixed and overflow:scroll, which will revolutionize this part and solve all that kind of problems we have today.
Today I remembered a website of a company in our building here in Munich, opened it with the iPad, and indeed, it had a scrollable news section on its frontpage. So I looked inside and saw that it is using ... tadaaa ... jScrollPane.
I don't think jScrollPane was developed for using it on mobile devices, but it has been optimized for that purpose, too. It just works on my iPad, my Android 2.3 and also on the latest Opera Mobile.
It doesn't feel like scrolling a native app on a mobile device, but it allows you to see a fully customizable scrollbar, jump to top and to buttom and, what's most important, to scroll with one finger.
Very nice.
Mobile webkit now supports scrolling using only CSS. Create a class 'scrollable' and add the following rules:
.scrollable {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
Add your 'scrollable' class to any block element that requires scrolling. Webkit Only.
https://github.com/filamentgroup/Overthrow/
Lightweight polyfill based solution that let's modern browsers with overflow:scroll support do their thing.
Still in early phase of development, but works pretty well on the largest affected user base (android 2.2/2.3/iOS<5).
How can I make a website(which is exist before) compatible with android?
So that we can use every functionality of that website on our android device.
Have a look at this link: http://developer.android.com/guide/webapps/targeting.html. The same rules would apply for making a website. One of the most important things is adding this line:
<meta name="viewport" content="width=device-width" />
This tells the browser to set the zoom level according to the device width. Otherwise the site will be zoomed out a lot and the user will have to zoom in to see the text properly.
Almost all of your website's functionality will work in the Android browser unless you have some really screwed up Javascript code.
Have a different stylesheet for the mobile browser.
Keep lower resolution graphics as bandwidth is a huge issue on phones. An EDGE network is too slow and even 3G speeds vary a lot.
Do not keep the pages too long. Display sections as Accordion menus which will expand/contract when the user clicks on the headers.
Do not keep drop down menus which are activated on mouse hover. There is no hover state on the phone.
This article from SmashingMagazine has a couple of other tips.
have a look at WebView here. I did this with an Internal site of mine. Basically I scaled it down in size and graphics. Depending on the amount of content it could be easy or more difficult.
rewrite/modify it to be compatible with mobile browsers. Its not something that you can just add a stylesheet for.
Android's webbrowser, at least for recent versions of Android, is quite powerful, and quite close, in terms of features, to a desktop one.
So, if your website doesn't do any too-fancy / special stuff (like super-recent HTML5), it should work quite well on an Android device.
Note, though, that if you want your website to work on a mobile device, you'll have to at least think about :
The fact that 3G (or worse) network is slow (bandwith is not great ; and ping is not good either) ; don't make your pages too heavy.
The screen is small : don't put too much data on it
Using touch-screens with big (compared to the screen's size) is hard and not precise : use big links, don't have links too close to each other.
So I've built a nice, shiny HTML5 application that is targeted at mobile Safari, and Android's default browser. The Android versions I'm testing it on are 2.1 and 2.2.
My app has a textarea on one of its pages, and this textarea tends to have a good amount of text in it at times. Its basically a free-form writing field.
This works as expected in iOS. However on Android, as you type, the screen scrolls wildly up and down on every keystroke, often you can't see what it is you're typing as you type, and you get dizzy from all the jumping around. Furthermore, if the content within the textarea exceeds its height, it appears to be impossible to scroll within it.
Don't even get me started on landscape mode. The above issues are even more pronounced there.
This feels like a bug with Android as there really isn't anything fancy about my textarea. I've stripped it down to the bare essentials, and it behaves the same.
Wondering if anyone else has had this much fun with their textareas on Android, and could maybe give some advice, or at least empathize?
It seems that Google has managed to mostly solve this in the Gmail web interface for Android. I'm guessing there's some JS magic going on because my markup/CSS is identical.
SOLUTION:
The 3D webkit is broken in Android, this is causing this problem. Make sure you are not using -webkit-transform: translate3d(0, 0, 0); or -webkit-backface-visibility: hidden; on anything related to the inputs. :(
If at all possible, you can lockdown the scrolling of the screen while the user is typing by setting the overflow property of body to 'hidden' - you can selectively enable/disable it on focus/blur events. Of course this does mean that your user will not be able to scroll while typing
There is no magic answer. Android keyboard input interactions with web forms is simply horrendous. You have to thread the needle very carefully to make it work properly, and keyboard behavior is not the same across Android versions. But it is possible with a LOT of work (see our Sencha Touch framework for what's possible today - the other mobile web frameworks are tackling the exact same problems too).
I experience this behavior on nearly every page. Here on StackOverflow, on a wordpress blog and many more.
I can only image that this is a usability bug/issue in the android browser and this is why I prefer native UI/application :)