Tricks and hacks for a more native feel in a mobile browser
summary
Concrete hacks and code-level claims: how to virtualize the browser event loop, remove the 300ms click delay by mapping touch to click with ten lines of JS, use the meta viewport and media queries to pin down the viewport, block pinch/zoom and swipe with preventDefault and user-select CSS, lock or query orientation via the screen orientation API, package with Apache Cordova / BlackBerry WebWorks for device APIs, and use location.reload(true) and remote web inspector for debugging.
AI-written summary · about
chapters (20)
- 0:00Intro
- 0:37Web vs App
- 2:16Web Technologies
- 3:20Native vs Web
- 4:42Basics
- 6:04The viewport
- 7:26CSS pixels
- 8:32Width and Height
- 11:08Media Queries
- 13:26Events
- 14:54Mousedown events
- 16:21Touch events
- 18:30Example
- 18:57Controversy
- 19:07Touch event
- 20:40Virtual event translations
- 22:02User select
- 22:43Browser Chrome
- 24:32Reload Button
- 25:11Conclusion
related talks
53mBreaking Limits on Mobile HTML5
18mThe Untouchable Web
18mFixing the Mobile Web - tips and tricks that can save your sanity
37mBuzz It For Real ! ... the tortuous road to Mobile HTML5 Apps
18mGetting Touchy Feely with the Mobile Web
31mBreaking the Limits of PWAs with JavaScript APIs
21mMaking Your Mobile Cross-Platform Dreams Come True with Modern Web
36mHorror Stories From Hacking the DOM Into a Native Platform