input type=numeric fix for Android 4.x

Gosh, RWD (responsive web design) combined with targeting both desktop, iOS and Android browsers is hard work. I just thought I was there when I got my  <input type="numeric" />  box working in all of Firefox, Chrome, Opera and Android 2.3, to my satisfaction. (Not identical behaviour: the up/down buttons only appear in Chrome and Opera, but that is the principle of progressive enhancement, and good enough.) I had to add a hack for Android 2.3, which makes things one pixel out of alignment in the desktop browsers at 400px or less. I can live with that, assuming desktop users won't be at 400px or less.

It worked in iOS7 (iPhone). Yeah and Phew!

On Android 4.2, native browser, there is this gap on the right of the input boxes!?!? It is just wide enough for the up/down buttons, but they are not drawn. Grrr....
(Some googling found someone on 4.0 with the same problem; other than that it seems almost unknown!)

Let me cut straight to the fix:

@media (max-width: 800px) {
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

All of that just came to me in a dream, and it worked first time. (No, actually I got that from this StackOverflow answer )

The media query is crude, as it means desktop Chrome won't show the buttons if you make the browser narrower than that, whereas a tablet with higher screen resolution will still show the gap. So, I'll probably switch to using user-agent detection later on.