Next.js 14应用部分移动设备文字显示异常求助

我用 JavaScript、Tailwind CSS 和 Framer Motion 开发了一个 Next.js 14 应用，目前收到三位用户反馈：仅在移动设备上存在文字显示错误。我已经尝试更换字体，并且按照官方文档卸载了 @next/font，但用户端的显示问题仍然没有改善。

截图对比 #

• 错误显示：卡片标题文字出现重叠、错位，部分字符排版混乱，无法正常阅读
• 正确显示：标题文字排列整齐，字符位置正常，无重叠或错位

相关代码 #

layout.js

import { Outfit } from "next/font/google";
import "./globals.css";
import MobileNavBar from "@/components/sub/MobileNavBar";
import { ThemeProvider } from "@/components/theme-provider";
import DarkModeToggle from "@/components/sub/DarkModeToggle";
import PageLoader from "@/components/PageLoader";
import { Analytics } from "@vercel/analytics/react";
const outfit = Outfit({
  subsets: ["latin"],
});

export const metadata = {
  title: "...",
  description: "...",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning={true}>
      <body className={outfit.className}>
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem
          disableTransitionOnChange
        >
          <PageLoader>
            <DarkModeToggle />
            <MobileNavBar />
            {children}
            <Analytics />
          </PageLoader>
        </ThemeProvider>
      </body>
    </html>
  );
}

Card.jsx

"use client";

import { motion } from "framer-motion";
import Link from "next/link";
import { FiArrowRight } from "react-icons/fi";

const TagebuchKarte = ({ Reisetagebuch }) => {
  const { Tagebucheintrag } = Reisetagebuch;
  const sortedTagebucheintrag = [...Tagebucheintrag].sort((a, b) => new Date(b.Datum) - new Date(a.Datum));
  
  return (
    <div className="p-4 md:p-8 bg-background">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8 w-full max-w-6xl mx-auto">
        {sortedTagebucheintrag.map((eintrag, index) => (
          <Card
            heading={eintrag.Titel}
            description={eintrag.Text}
            imgSrc={eintrag.ImageUrl}
            uniqueID={eintrag.uniqueID}
            country={Reisetagebuch.Land}
            key={index}
          />
        ))}
      </div>
    </div>
  );
};

const Card = ({ heading, description, imgSrc, uniqueID, country }) => {
  var trimmedString = description.substr(0, 50);

  //re-trim if we are in the middle of a word
  trimmedString = trimmedString.substr(
    0,
    Math.min(trimmedString.length, trimmedString.lastIndexOf(" "))
  );

  return (
    <Link href={`/tagebuch/${uniqueID}`}>
      <motion.div
        transition={{
          // staggerChildren: 0.035,
          staggerChildren: 0.015,
        }}
        whileHover="hover"
        className="w-full h-64 bg-slate-200 overflow-hidden cursor-pointer group relative"
      >
        <div
          className="absolute inset-0 saturate-100 md:saturate-0 md:group-hover:saturate-100 group-hover:scale-110 transition-all duration-500"
          style={{
            backgroundImage: `url(${imgSrc})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        />
        <div className="p-4 relative z-20 h-full text-primary-foreground group-hover:text-white transition-colors duration-500 flex flex-col justify-between">
          <FiArrowRight className="text-3xl group-hover:-rotate-45 transition-transform duration-500 ml-auto" />
          <div>
            <h4>
              {heading.split("").map((l, i) => (
                <ShiftLetter letter={l} key={i} />
              ))}
            </h4>
            <p>{trimmedString}</p>
          </div>
        </div>
      </motion.div>
    </Link>
  );
};

const ShiftLetter = ({ letter }) => {
  return (
    <div className="inline-block overflow-hidden h-[36px] font-semibold text-3xl">
      <motion.span
        className="flex flex-col min-w-[4px]"
        style={{
          y: "0%",
        }}
        variants={{
          hover: {
            y: "-50%",
          },
        }}
        transition={{
          duration: 0.3,
        }}
      >
        <span>{letter}</span>
        <span>{letter}</span>
      </motion.span>
    </div>
  );
};

export default TagebuchKarte;

内容的提问来源于stack exchange，提问作者Christian Lang