css 接下来13+检查移动终端

qyuhtwio  于 2023-03-14  发布在  其他
关注(0)|答案(1)|浏览(120)

Next他的项目是如何实现的。但移动设备是如何实现的。而移动设备是如何实现的。

import useTranslation from "next-translate/useTranslation";
import isMobile from "ismobilejs";
import DefaultLayout from "../../components/core/Layouts/Default";
import { MouseIcon, ScrollDownWrapper, ScrollText, SearchBoxWrapper, SliderWrapper, Wrapper } from "./style";
import MainSlider from "../../components/common/MainSlider";
import SearchBox from "../../components/common/SearchBox";

const HomeScreen = () => {
    const { t } = useTranslation("home");
    const isMobileDevice = isMobile()?.any;

    return (
        <DefaultLayout>
            <Wrapper>
                <SearchBoxWrapper>
                    <SearchBox />
                    {isMobileDevice && (
                        <ScrollDownWrapper>
                            <MouseIcon />
                            <ScrollText>{t("scrollDown")}</ScrollText>
                        </ScrollDownWrapper>
                    )}
                </SearchBoxWrapper>
                <SliderWrapper>
                    <MainSlider />
                </SliderWrapper>
            </Wrapper>
        </DefaultLayout>
    );
};

export default HomeScreen;

我想使用“use client”在客户端呈现项目,因为isMobijeJs需要窗口对象,但它不起作用。
你能帮帮我吗?

c9qzyr3d

c9qzyr3d1#

你可以使用react-device-detect包。它也很容易使用,并且有很多选项,比如可以解决你的问题的特定视图元素。我已经在Next 13.2上测试过了,可以确认它是有效的。

相关问题