0
# Browser Detection
1

2
User agent and platform detection utilities for responsive and device-specific functionality. Provides detailed information about the browser and operating system.
3

4
## Capabilities
5

6
### Operating System Detection
7

8
Detect operating system and device characteristics.
9

10
```javascript { .api }
11
/**
12
 * Operating system detection object
13
 */
14
$.os; // Main OS detection object
15

16
// OS Properties:
17
// $.os.ios - iOS device (iPhone, iPad, iPod)
18
// $.os.android - Android device
19
// $.os.webos - WebOS device
20
// $.os.blackberry - BlackBerry device
21
// $.os.bb10 - BlackBerry 10 device
22
// $.os.rimtabletos - RIM Tablet OS
23
// $.os.playbook - PlayBook device
24
// $.os.kindle - Kindle device
25
// $.os.silk - Silk browser (Kindle Fire)
26
// $.os.version - OS version string
27
// $.os.tablet - Tablet device
28
// $.os.phone - Phone device
29
```
30

31
**Usage Examples:**
32

33
```javascript
34
// Check for specific OS
35
if ($.os.ios) {
36
  console.log('Running on iOS');
37
  $('.ios-specific').show();
38
}
39

40
if ($.os.android) {
41
  console.log('Running on Android');
42
  $('body').addClass('android');
43
}
44

45
// Version checking
46
if ($.os.ios && parseFloat($.os.version) >= 13.0) {
47
  console.log('iOS 13 or later');
48
  enableModernFeatures();
49
}
50

51
// Device type detection
52
if ($.os.tablet) {
53
  $('body').addClass('tablet-layout');
54
} else if ($.os.phone) {
55
  $('body').addClass('phone-layout');
56
}
57

58
// Responsive behavior based on OS
59
if ($.os.ios || $.os.android) {
60
  // Mobile-specific behavior
61
  enableTouchOptimizations();
62
  $('.desktop-only').hide();
63
} else {
64
  // Desktop behavior
65
  enableKeyboardShortcuts();
66
  $('.mobile-only').hide();
67
}
68
```
69

70
### Browser Detection
71

72
Identify browser engine and version information.
73

74
```javascript { .api }
75
/**
76
 * Browser detection object
77
 */
78
$.browser; // Main browser detection object
79

80
// Browser Properties:
81
// $.browser.webkit - WebKit-based browser (Safari, Chrome, etc.)
82
// $.browser.chrome - Chrome browser
83
// $.browser.safari - Safari browser
84
// $.browser.firefox - Firefox browser
85
// $.browser.ie - Internet Explorer
86
// $.browser.opera - Opera browser
87
// $.browser.version - Browser version string
88
```
89

90
**Usage Examples:**
91

92
```javascript
93
// Browser-specific handling
94
if ($.browser.webkit) {
95
  console.log('WebKit browser detected');
96
  $('.webkit-styles').addClass('active');
97
}
98

99
if ($.browser.chrome) {
100
  console.log('Chrome browser');
101
  enableChromeFeatures();
102
}
103

104
if ($.browser.safari) {
105
  console.log('Safari browser');
106
  applySafariWorkarounds();
107
}
108

109
// Version-based feature detection
110
if ($.browser.ie && parseInt($.browser.version) < 11) {
111
  console.log('Legacy IE detected');
112
  loadIEPolyfills();
113
  $('.modern-feature').hide();
114
}
115

116
// Firefox-specific optimizations
117
if ($.browser.firefox) {
118
  // Firefox handles animations differently
119
  $.fx.speeds._default = 300; // Adjust default animation speed
120
}
121
```
122

123
### Feature Detection Patterns
124

125
Combining detection with feature support checks.
126

127
```javascript
128
// Combine with feature detection
129
function supportsTouch() {
130
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
131
}
132

133
function initializeInterface() {
134
  if ($.os.ios || $.os.android || supportsTouch()) {
135
    // Touch interface
136
    $('body').addClass('touch-enabled');
137
    initializeTouchEvents();
138
  } else {
139
    // Mouse interface
140
    $('body').addClass('mouse-enabled');
141
    initializeMouseEvents();
142
  }
143
}
144

145
// Capability-based loading
146
if ($.browser.webkit && $.os.ios) {
147
  // iOS Safari specific features
148
  enableiOSFeatures();
149
} else if ($.browser.webkit && $.os.android) {
150
  // Android Chrome specific features
151
  enableAndroidFeatures();
152
}
153

154
// Progressive enhancement
155
function enhanceForPlatform() {
156
  const capabilities = {
157
    hasTouch: supportsTouch(),
158
    isRetina: window.devicePixelRatio > 1,
159
    isMobile: $.os.phone || $.os.tablet,
160
    isIOS: $.os.ios,
161
    isAndroid: $.os.android
162
  };
163
  
164
  if (capabilities.isRetina) {
165
    $('img[data-2x]').each(function() {
166
      $(this).attr('src', $(this).data('2x'));
167
    });
168
  }
169
  
170
  if (capabilities.hasTouch) {
171
    $('.hover-effect').addClass('touch-hover');
172
  }
173
  
174
  return capabilities;
175
}
176
```
177

178
### Responsive Design Integration
179

180
Using detection for responsive layouts and behavior.
181

182
```javascript
183
// Device-specific CSS classes
184
function addDeviceClasses() {
185
  const classes = [];
186
  
187
  if ($.os.ios) classes.push('ios');
188
  if ($.os.android) classes.push('android');
189
  if ($.os.tablet) classes.push('tablet');
190
  if ($.os.phone) classes.push('phone');
191
  
192
  if ($.browser.webkit) classes.push('webkit');
193
  if ($.browser.chrome) classes.push('chrome');
194
  if ($.browser.safari) classes.push('safari');
195
  if ($.browser.firefox) classes.push('firefox');
196
  
197
  $('body').addClass(classes.join(' '));
198
}
199

200
// Responsive breakpoints with device context
201
function getResponsiveContext() {
202
  const width = $(window).width();
203
  const context = {
204
    breakpoint: 'desktop',
205
    isMobile: $.os.phone || $.os.tablet,
206
    isTablet: $.os.tablet,
207
    isPhone: $.os.phone
208
  };
209
  
210
  if (width < 480) {
211
    context.breakpoint = 'phone';
212
  } else if (width < 768) {
213
    context.breakpoint = 'small-tablet';
214
  } else if (width < 1024) {
215
    context.breakpoint = 'tablet';
216
  }
217
  
218
  // Override based on device detection
219
  if ($.os.phone && width > 480) {
220
    context.breakpoint = 'phone-landscape';
221
  }
222
  
223
  return context;
224
}
225

226
// Usage in responsive handlers
227
$(window).on('resize', function() {
228
  const context = getResponsiveContext();
229
  $('body').attr('data-context', context.breakpoint);
230
  
231
  if (context.isMobile) {
232
    // Mobile-specific resize handling
233
    adjustMobileLayout();
234
  }
235
});
236
```
237

238
### Performance Optimizations
239

240
Device-specific performance enhancements.
241

242
```javascript
243
// Performance based on device capabilities
244
function optimizeForDevice() {
245
  if ($.os.ios && parseInt($.os.version) < 10) {
246
    // Older iOS devices - reduce animations
247
    $.fx.off = true;
248
    $('.heavy-animation').removeClass('animated');
249
  }
250
  
251
  if ($.os.android && parseInt($.os.version) < 5) {
252
    // Older Android - disable complex effects
253
    $('.complex-effect').addClass('simple-fallback');
254
  }
255
  
256
  // High-DPI optimizations
257
  if (window.devicePixelRatio > 2) {
258
    // Very high DPI - may need performance adjustments
259
    $('.particle-effect').addClass('reduced-particles');
260
  }
261
}
262

263
// Memory management for different devices
264
function manageMemoryUsage() {
265
  if ($.os.ios && ($.os.phone || navigator.hardwareConcurrency < 4)) {
266
    // Likely older or memory-constrained device
267
    $('.memory-intensive').addClass('lazy-load');
268
    enableImageLazyLoading();
269
  }
270
}
271
```
272

273
### Polyfill Loading
274

275
Conditional loading of polyfills based on browser capabilities.
276

277
```javascript
278
// Conditional polyfill loading
279
function loadPolyfills() {
280
  const polyfills = [];
281
  
282
  if ($.browser.ie && parseInt($.browser.version) < 11) {
283
    polyfills.push('/js/polyfills/ie10.js');
284
  }
285
  
286
  if (!window.Promise) {
287
    polyfills.push('/js/polyfills/promise.js');
288
  }
289
  
290
  if (!window.fetch) {
291
    polyfills.push('/js/polyfills/fetch.js');
292
  }
293
  
294
  // Load polyfills sequentially
295
  loadScripts(polyfills).then(() => {
296
    initializeApp();
297
  });
298
}
299

300
// Browser-specific workarounds
301
function applyBrowserWorkarounds() {
302
  if ($.browser.safari && $.os.ios) {
303
    // iOS Safari viewport unit fix
304
    function setVH() {
305
      document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
306
    }
307
    setVH();
308
    $(window).on('resize', setVH);
309
  }
310
  
311
  if ($.browser.ie) {
312
    // IE flexbox fixes
313
    $('.flex-container').addClass('ie-flex-fix');
314
  }
315
}
316
```
317

318
### Testing and Development
319

320
Utilities for testing detection across different environments.
321

322
```javascript
323
// Development helper for testing
324
function simulateDevice(deviceType) {
325
  // Only for development/testing
326
  if (typeof window.DEVELOPMENT !== 'undefined') {
327
    switch (deviceType) {
328
      case 'ios':
329
        $.os = {ios: true, version: '14.0', phone: true};
330
        $.browser = {webkit: true, safari: true, version: '14.0'};
331
        break;
332
      case 'android':
333
        $.os = {android: true, version: '10', phone: true};
334
        $.browser = {webkit: true, chrome: true, version: '80'};
335
        break;
336
    }
337
    
338
    addDeviceClasses();
339
    optimizeForDevice();
340
  }
341
}
342

343
// Log detection results for debugging
344
function logDetectionInfo() {
345
  console.group('Browser Detection');
346
  console.log('OS:', $.os);
347
  console.log('Browser:', $.browser);
348
  console.log('User Agent:', navigator.userAgent);
349
  console.log('Screen:', screen.width + 'x' + screen.height);
350
  console.log('Viewport:', $(window).width() + 'x' + $(window).height());
351
  console.groupEnd();
352
}
353

354
// Call during development
355
if (window.location.hostname === 'localhost') {
356
  logDetectionInfo();
357
}
358
```
359

360
### Internal Detection Function
361

362
Access to internal detection mechanism for testing.
363

364
```javascript { .api }
365
/**
366
 * Internal detection function (primarily for testing)
367
 * @param ua - User agent string to parse
368
 * @returns Detection results object
369
 */
370
$.__detect(ua);
371
```
372

373
**Usage:**
374

375
```javascript
376
// Test detection with custom user agent
377
const testUA = 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)';
378
const detection = $.__detect(testUA);
379
console.log('Detected:', detection);
380

381
// Useful for unit testing
382
function testDetectionLogic() {
383
  const testCases = [
384
    'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)',
385
    'Mozilla/5.0 (Linux; Android 10; SM-G975F)',
386
    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
387
  ];
388
  
389
  testCases.forEach(ua => {
390
    const result = $.__detect(ua);
391
    console.log(`UA: ${ua}`);
392
    console.log(`Result:`, result);
393
  });
394
}
395
```