下一個js；某些行動裝置上元件中的文字模糊

Question

正如標題所說，我仍然遇到問題，我的 nextjs 頁面上的某些文字看起來模糊，但在某些行動裝置上線上。我在一些 iPhone 上註意到這一點最為明顯。這對於行動裝置來說是正確的，如果我使用控制台來測試行動佈局。這只是我頁面上的兩個元件的問題。兩張卡片都可以翻轉以查看背面。它們還使用 Framermotion 進行動畫處理。樣式是用 Tailwind 完成的 頁面其他部分的常規文字正常顯示。

這是一個範例圖片，您可以明白我的意思。較大的文字似乎很好，但較小的文字很模糊。我只包含了正面的螢幕截圖。背面也有同樣的問題。

該元件對應的程式碼在這裡：

'use client';
import Link from "next/link";
import Image from "next/image";
import { motion } from 'framer-motion';
import { fadeIn } from '../../../utils/motion';

function ProjectCard({ index, id, title, icons, description, ghlink, pagelink }: any) {
    return (
        <motion.div
            variants={fadeIn('right', 'spring', index * 0.1, 1.75)}
            initial="hidden"
            whileInView="show"
            key={id}
            className="w-[280px] md:w-[300px] h-[440px] cursor-pointer group perspective my-4 md:m-6"
        >
            <div className="w-full h-full absolute border-2 rounded-[15px] preserve-3d group-hover:flip-cardY duration-500">
                {/* FRONT FACE */}
                <div className="absolute w-full h-full glassmorphism rounded-[15px] backface-hidden text-center flex flex-col items-center justify-between z-50">
                    <h3 className="pt-8 font-bold text-[26px] gap-4 text-[#18BC9C]">{title}</h3>
                    <div className="flex flex-row flex-wrap items-center justify-center md:m-1 z-50">
                        {icons.map(
                            (icon: any, id: any) => (
                                <p key={id} className="rounded-[25px] text-[10px] bg-[#34acc7] py-1 px-2 m-1 tracking-wide">#{icon}</p>
                            ))
                        }
                    </div>
                    <p className="text-[12px] font-bold text-[#18BC9C] p-3">Hover for more Info!</p>
                </div>
                {/* BACK FACE */}
                <div className="absolute w-full h-full bg-[#2E3A59] rounded-[15px] backface-hidden flip-cardY text-center flex flex-col p-2 items-center justify-between z-50">
                    <h3 className="p-4 font-bold text-[22px] gap-4 text-[#18BC9C]">ABOUT THIS PROJECT</h3>
                    <p className="text-[15px] text-justify">
                        {description}
                    </p>
                    <div className="flex flex-row gap-6 m-4 bottom-0">
                        {ghlink &&
                            <>
                                <Link href={ghlink} target="_blank">
                                    <Image alt="github" src="github.svg" width={25} height={25} className='py-2 md:w-[40px] md:h-[40px] object-contain hover:scale-150 duration-200' />
                                </Link>
                            </>
                        }
                        {pagelink &&
                            <>
                                <Link href={pagelink} target="_blank">
                                    <Image alt="homepage" src="link.svg" width={25} height={25} className='py-2 md:w-[40px] md:h-[40px] object-contain hover:scale-150 duration-200' />
                                </Link>
                            </>
                        }
                    </div>
                </div>
            </div>
        </motion.div>
    )
};

export default ProjectCard;

我嘗試刪除樣式和成幀器運動動畫，並嘗試從頭開始製作另一個組件並嘗試找出錯誤來找到解決方案。兩者似乎都不是解決方案。感謝您的幫忙！

Answer 1

經過一番挖掘，我仍然無法在其他地方找到有用的答案。我只是把文字放大了一點，這有點幫助。文字對我來說仍然很模糊，但至少現在是可讀的。我還覺得有趣的是，一旦您將滑鼠懸停在卡片上並且它開始轉動，文字就會變得清晰。

目前唯一的解決方案是將文字設定為 13px，而不是最初的 10px