2

My web application has to support multiple devices. I have written common css for all mobile pad devices, but it is giving some issues on iPad. I found the fix specifically for iPad.

Now I want to separate out css for iPad and galaxy device.

Is there any way to in media queries or any other way to load one css for ipad and another for galaxy device ?

Dhruv
  • 10,291
  • 18
  • 77
  • 126
  • Maybe this helps: http://stackoverflow.com/questions/4964589/galaxy-tablet-browser-sniff-detection – m90 Apr 12 '12 at 07:31

4 Answers4

1

You can do combinations using media queries to detect the device and target your CSS. Devices have a specific set of properties (resolution, orientation, width, height etc.) which you can use media queries to pick them out. Here's MDN's reference and another article for further reference, as well as a similar question

Community
  • 1
  • 1
Joseph
  • 117,725
  • 30
  • 181
  • 234
1

The only media query you can use is the one ask about the size of screen if this isn't enought for some reason (maybe screens are same size or you must know the model) you can work with this script to identify the device and load the relevant css according to the device.

Chen Kinnrot
  • 20,609
  • 17
  • 79
  • 141
1

You can very simply detect http request user agents for iOS devices like iPad or iPhone, by comparing them with regular expressions, and include relevant CSS accordingly. A simple regular expression to detect iPhone/iPad would be :

(iPhone|iPad).*?OS ((\d+)_(\d+))(?:_(\d+))?
DhruvPathak
  • 42,059
  • 16
  • 116
  • 175
1

if, by 'the fix specifically for iPad', you mean a fix to the installed Safari instance - you should use feature detection.

it's most easy to do so using a designated JS library, i prefer Modernizr.

Eliran Malka
  • 15,821
  • 6
  • 77
  • 100