Utils and Device Detection

app.device (also Framework7.device) parses the user agent once at startup: ios, android, desktop, iphone, ipad, osVersion, pixelRatio, webView/standalone (running from the home screen), cordova, capacitor and electron. The device module also writes matching classes on <html> for CSS. The same snippet in three Chrome 1 contexts, with an iPhone user agent, a Pixel 8 user agent, and none:

Reading app.device in the DevTools consoleJavaScript

const { ios, android, desktop, osVersion, pixelRatio, standalone } = app.device;
console.log(JSON.stringify({ ios, android, desktop, osVersion, pixelRatio, standalone }));
console.log(document.documentElement.className);

Output

{"ios":true,"android":false,"desktop":false,"osVersion":"26.0","pixelRatio":2,"standalone":fals
  e}
ios ios-translucent-bars ios-translucent-modals device-pixel-ratio-2 device-ios
{"ios":false,"android":true,"desktop":false,"osVersion":"16","pixelRatio":2,"standalone":false}
md device-pixel-ratio-2 device-android
{"ios":false,"android":false,"desktop":true,"pixelRatio":1,"standalone":false}
md device-pixel-ratio-1 device-desktop device-windows

This is user-agent sniffing: fine for styling, not for capabilities, so test a feature ('share' in navigator) before using it. app.utils holds Framework7 572,986 's internal helpers:

A few of app.utilsJavaScript

const { utils } = app;
console.log(JSON.stringify(utils.parseUrlQuery('/books/3/?from=pick&tab=notes')));
console.log(utils.serializeObject({ q: 'salt & saffron', page: 2 }));
console.log(JSON.stringify(utils.extend({ ship: { to: 'KK' } }, { ship: { by: 'air' } })));

Output

{"from":"pick","tab":"notes"}
q=salt%20%26%20saffron&page=2
{"ship":{"to":"KK","by":"air"}}

extend() merges deeply, which is why route and navigation props combined in Async Routes. id(), uniqueNumber(), nextTick(), nextFrame() and the color converters behind setColorTheme() complete the set.

MENU

Utils and Device Detection