تنظیم اندازه متن در CSS با text-size-adjust

استفاده از ویژگی text-size-adjust در CSS به ما امکان می‌دهد که اندازه متن در مرورگرها را تنظیم کنیم. این ویژگی به خصوص در مرورگرهای موبایل که ممکن است اندازه متن را به صورت خودکار بزرگ‌تر کنند، بسیار مفید است.

به صورت پیش‌فرض، مرورگرهای موبایل ممکن است در حین زوم کردن متن را برای خوانایی بیشتر بزرگ‌تر کنند. اما در بعضی مواقع این بزرگ‌تر شدن ممکن است باعث مشکلات ظاهری در طراحی صفحه شود. با استفاده از text-size-adjust می‌توانید کنترل بیشتری روی این رفتار داشته باشید.

یکی از کاربردهای اصلی text-size-adjust این است که در طراحی‌های واکنش‌گرا وقتی که سعی در حفظ ثبات ظاهری دارید به شما کمک می‌کند. با تنظیم مناسب این ویژگی، مطمئن می‌شوید که متن در دستگاه‌های مختلف به طرز صحیح نمایش داده شود.

ویژگی text-size-adjust دارای مقادیری مانند auto, none, و واحدهای درصدی است. استفاده از auto به مرورگر اجازه می‌دهد تا رفتار پیش‌فرض خود را اجرا کند. none باعث می‌شود که مرورگر هیچ تغییری در اندازه متن ندهد، و مقادیر درصدی به شما اجازه می‌دهد تا یک اندازه خاص را تنظیم کنید.

در ادامه، چند نمونه کد برای استفاده از ویژگی text-size-adjust آورده شده است:

body {\r\n  -webkit-text-size-adjust: 100%;\r\n  -moz-text-size-adjust: 100%;\r\n  -ms-text-size-adjust: 100%;\r\n  text-size-adjust: 100%;\r\n}\n\nheader {\r\n  -webkit-text-size-adjust: none;\r\n  -moz-text-size-adjust: none;\r\n  -ms-text-size-adjust: none;\r\n  text-size-adjust: none;\r\n}\n\narticle {\r\n  text-size-adjust: auto;\r\n}

در مثال بالا، در استایل body اندازه متن در همه مرورگرها به 100% تنظیم شده است که به معنای اندازه پیش‌فرض و عدم تغییر می‌باشد.
برای عنصر header، text-size-adjust به none تعیین شده است، یعنی اندازه متن ثابت و بدون تغییر باقی می‌ماند.
در عنصر article نیز، text-size-adjust به auto تنظیم شده که به مرورگر اجازه می‌دهد تا بهترین تصمیم را بگیرد.