CODEWITHSUNDEEP
cssgoogle-chromesafariios
SongBox
SongBox

Reputation: 691

CSS tags/media queries for chrome on iPhone

So Chrome is here for iOS.. Hoorah!

However now due to the different screen layout (no footer toolbar) it messes with the ability to make a perfect layout for iphone web pages.

I have a site for my company that resided perfectly inside an iphone screen, no scrolling required, it looked like an app. However now that chrome is here (and wildly popular) with its different screen layout, sites that were sized for iphone safari now look odd.

Is there, or will there be, ways to isolate out chrome from safari and give them different CSS?

Upvotes: 2

Views: 1594

Answers (1)

exaptis
exaptis

Reputation: 249

You can check against the user-agent as the mobile version of chrome contains the wording "CriOS". Depending on this, you then can load different/additional stylesheets.

Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; en) AppleWebKit/534.46.0   
(KHTML, like Gecko) CriOS/19.0.1084.60 Mobile/9B206 Safari/7534.48.3

See: https://developers.google.com/chrome/mobile/docs/user-agent

You can check it with JS with just two lines:

var userAgent = navigator.userAgent.toString().toLowerCase();
if(userAgent.indexOf('crios') != -1) { alert('you are using chrome for ios') }

For PHP have a look at:

https://www.php.net/manual/en/function.get-browser.php

Upvotes: 3

Related Questions