device-asset
Advanced tools
device-asset is used to read the browser's window + screen to calculate the best file size you should use for a given asset. Additionally,
you can pass options like base and ext to immediately create the correct filename path.
Use anywhere you have a global window and screen object.
Filenames will become back as a string that corresponds to the keys in config.json.
var da = require('device-asset');
da.getAsset();
will produce a response:
{
"displayName": "iPhone 6 Plus",
"fileName": "iphone_6_plus",
"res": {
"w": 1242,
"h": 2208
}
}
Additionally, you can pass options base or ext like so:
var da = require('device-asset');
da.getAsset({
base: 'http://mysite.com/images/',
ext: 'jpg'
});
will produce a response with useful fileName:
{
"displayName": "iPhone 6 Plus",
"fileName": "http://mysite.com/images/iphone_6_plus.jpg",
"res": {
"w": 1242,
"h": 2208
}
}
If you're feeling extra lucky, you can pass your own config (use the structure in config.json).
var da = require('device-asset');
var customConfig = {
"custom_thing": {
"displayName": "Custom Thing",
"fileName": "custom_thing",
"res": {
"w": 600,
"h": 800
}
},
"custom_thing_2": {
"displayName": "Custom Thing 2",
"fileName": "custom_thing 2",
"res": {
"w": 200,
"h": 300
}
}
}
da.getAsset({
base: 'http://mysite.com/images/',
ext: 'jpg'
}, customConfig);
You can also get the default config by using getDevices.
var da = require('device-asset');
function getOptions(devices) {
return Object.keys(devices).map(function(d) {
var elm = document.createElement('option');
elm.value = devices[k].fileName;
elm.innerHTML = devices[k].displayName
return elm;
});
}
var devices = getOptions(da.getDevices());
To use outside of NPM, require the device-asset-min.js file in your project which will expose a global deviceAsset object.
<html>
<head>
<title>Page</title>
</head>
<body>
<div id="mount"></div>
<script type="text/javascript" src="/device-asset-min.js"></script>
<script>
var bestAsset = deviceAsset.getAsset({
base: 'http://mysite.com/images/',
ext: 'jpg'
});
var image = document.createElement('img');
image.src = bestAsset.fileName;
var container = document.getElementById('mount');
container.appendChild(image);
</script>
</body>
</html>
FAQs
Easily get device-specific assets.
The npm package device-asset receives a total of 0 weekly downloads. As such, device-asset popularity was classified as not popular.
We found that device-asset demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.