HTML5 Gotches on Mobile
Update These are some notes when we build the first version of our mobile App last year. It’s a hybrid version using Ionic. I have to admit it was a pain to implement new features and maintain. We switched to native apps about half a year later.
<input type="file">It takes seconds to trigger
onchangeevent if we select a couple of files(e.g. >= 8 pictures) on iOS, making it unusable. Reference
We have two
divs in a row, both contains some vary length texts, we want to size the left
divto its content and let the right
divtake up the rest space. The solution is use
overflow:hiddentrick to mimic flexible layout. Reference
Rich text editor in browser? Yes, we can do it! The best solution is use
Document.execCommand. Libraries exists, but if you are looking for a robust solution on mobile platforms, I think you’re out of luck as the time I am writing this(2015/04/16). You may also want the Selection and Range APIs.
iOS input focus issue. We have a search input box and a clear button next to it. When clicking the clear button, we want clear the search box and set focus to it. The trick is
preventDefaultin clear button’s
truewhen registering the event listener). Then set focus to input in
touchend. Note, there will be no
focus()must be called within the event handler, not inside any form of asynchronous callbacks.
Half pixel lines in CSS. Some times we need this, it may sound crazy at first, why the hell we ever need half pixel lines? It turns out we need it on Retina devices to draw a line that is only 1 physical pixel height. There’re two methods:
scale up and down. Reference