Besides resetting my travel blog, I also completely wiped out my game dev blog. The following post was about the only one that was at all useful to other developers, so I wanted to recapture it here. In any case, if you’re using HTML5 to build your mobile app, here are a few tips to take into consideration to get your project running smoother:
1. Use native code for audio
2. Use .bind(‘touchstart’) instead of .click()
3. Force hardware acceleration
Any animation or transition (sliding, fading, etc.) can chug quite a bit on lower-end Android devices. Applying the CSS property -webkit-transform: translateZ(0) to any element that moves can force the device to use hardware acceleration. Note that this is really only necessary for Android apps. Using it for iOS may actually cause your app to perform worse.
4. Disable touch highlighting
This is another Android-only fix. Whether your objects are clickable or touchable, Android devices like to highlight them in orange. Not only is this highlight super ugly but it can make clicking/touching something harder than it should be. Use the CSS property -webkit-tap-highlight-color: rgba(0,0,0,0) to remove it.
5. Set constraints on WebView
And now for an iOS-specific issue. An annoying problem I encountered in Xcode was that its WebView element doesn’t automatically take up the size of the screen. By default, its width and height are hard-coded, and it’s not immediately obvious how to set these values to “100%.” Hint: you don’t. You set constraints on each of the borders, instead.
6. Remove folder paths
Another oddity in Xcode is how it collapses all of your directories when you build your project. As a web developer, I naturally group things into folders. One for images, one for JS files, one for CSS files, etc. Xcode completely ignores this, putting everything into one folder. So not only do you need to change every path in your code to not include directories anymore, you also have to be careful you don’t have two files with the same name. Xcode won’t differentiate between folder/index.html and index.html and will only render one.
7. Don’t use CSS media queries