turbolinks/turbolinks-ios

How to hide specific HTML in iOS but not mobile web?

andrewhavens opened this issue · 2 comments

This is probably documented somewhere, but I've looked all over and can't seem to find it. Is it possible to hide specific HTML that should not be rendered in the native app? For example, I want to use a UITabBar in iOS instead of my "responsive mobile" navigation. However, I want to keep the responsive mobile navigation when viewing the site in a browser.

You can do that any number of ways. You could specify a specific User-Agent for your iOS app and use that to customize which CSS is delivered, that can then hide specific elements. You can also use WKWebView's various methods to interact with the page including user scripts and evaluating JavaScript to hide it.

In Basecamp 3, we do a combination of the two. Primarily, we set certain data-* attributes on the document that show/hide various elements in the page. The CSS for this is only delivered to the iOS and Android apps.

We've defined helper methods i.e. ios_app? that scans the user agent. This comes handy in views and controllers.