我需要检测用户设备(浏览器,操作系统等),并根据设备类型(移动设备或台式机)显示不同的导航。它应该在Sapper / Svelte的SSR期间工作。
任何帮助,我们将不胜感激!
答案 0 :(得分:0)
对于Sapper server.js:
polka() // You can also use Express
.use(
compression({ threshold: 0 }),
sirv('static', { dev }),
sapper.middleware({
// let make device detection possibility, e.g. in <Nav> component
session: (req, res) => ({
'user-agent': req.headers['user-agent']
})
})
)
.listen(PORT, err => {
if (err) console.log('error', err);
});
对于Sapper Nav.svelte组件
<script>
export let segment;
import { stores } from '@sapper/app';
import UAParser from 'ua-parser-js';
// session is passed in server.js
const { preloading, page, session } = stores();
var parser = new UAParser();
parser.setUA($session['user-agent']);
let mobile = parser.getResult().device['type'] == 'mobile';
</script>
{#if mobile}
<p>Mobile menu here</p>
{:else}
<p>Desktop menu here</p>
{/if}
此外,别忘了先 npm先安装ua-parser-js --save !
答案 1 :(得分:0)
看看顺风css,它非常适合svelte的类用法:https://tailwindcss.com/docs/responsive-design/
还有一些使用汇总与sapper集成的示例: https://github.com/langbamit/sapper-postcss-tailwind-rollup