0

I'd like to detect Chrome on mobile devices only e.g Chrome for Android, Chrome for iOS. What's a reliable way to do this?

EDIT 1: In case you're wondering why...

The mobile version of Chrome annoyingly changes the viewport height when the address bar shows/hides. Because my site relies so heavily on vh units, the user experience while scrolling on Chrome for Android and Chrome for iOS is ugly.

My solution is to wrap the entire site in a limited height container and relegate the scrolling to it. This prevents the window from scrolling, thus preventing the address bar from hiding. The only problem is that on desktop browsers scrolling becomes problematic because my layout contains fixed elements that obscure the wrapping container's scrollbar. Seeing as I may not ever find a solution to that problem, the best way forward for me is to detect Chrome on mobile devices, and apply the new layout only then.

EDIT 2: The answers given in this question do not work for me. They detect Chrome even on Safari and the stock browser.

Community
  • 1
  • 1
Dalal
  • 1,096
  • 2
  • 17
  • 38
  • Is there a reason you need to do this? Browser sniffing is normally a sign of an underlying XY problem. – Rory McCrossan Jul 11 '16 at 19:19
  • 1
    While perhaps an "eww" question, it's not a (necessarily) "bad" question. A good answer could highlight how the detection is possible (different means?), and hopefully provide a clean(er) suggestion as a follow up. – user2864740 Jul 11 '16 at 19:20
  • I edited the question to explain. I've gone through all kinds of pains to try and ensure I wouldn't have to do this, but alas, this is what it's come to :P – Dalal Jul 11 '16 at 19:20
  • Short answer: there's no bullet-proof way to do this. – Jared Smith Jul 11 '16 at 19:22
  • When the address bar is gone, what are you intending to do differently? Like what do you want to do with the extra viewport height? – ryanve Jul 11 '16 at 19:24
  • My layout changes based on viewport height. When Chrome gets rid of the address bar on scroll, it doesn't update vh until scroll has ended. So when the scroll ends, there's a jump. That's the basic problem, but it gets compounded because I've got a lot of other things going on. Mobile Safari, in contrast, doesn't change the viewport height at all, so it leaves the layout intact on scroll. – Dalal Jul 11 '16 at 19:28

1 Answers1

1

Search in user-agent-string and look for Chrome and (Android or iOS). More info: http://www.useragentstring.com/

Rikin
  • 5,351
  • 2
  • 15
  • 22