CSS و Safari's Font-Size Quirk

لقد لوحظ أن Safari على أجهزة iPhone يعرض اختلافات غير متوقعة في حجم الخط. على وجه التحديد، يظهر النص ذو أحجام الخطوط الأصغر (على سبيل المثال، 13 بكسل) أكبر من تلك ذات الأحجام الأكبر (على سبيل المثال، 15 بكسل). يثير هذا السلوك المحير السؤال: هل هناك عوامل مرتبطة بـ CSS أو عوامل أخرى مسؤولة عن تجاوزات حجم الخط في Safari؟

لمعالجة هذا اللغز، من الضروري فهم جانب مهم من Safari على الأجهزة المحمولة. كإجراء سهل الاستخدام، يقوم Mobile Safari تلقائيًا بضبط حجم النص عندما يستشعر خطر عرض نص صغير جدًا. هذه محاولة لتحسين إمكانية القراءة، خاصة على شاشات iPhone الأصغر حجمًا. للتغلب على هذا التعديل الآلي، تأتي خاصية CSS للإنقاذ: -webkit-text-size-adjust.

إليك مثال عملي للتخلص من الارتباك بشأن حجم الخط لمستخدمي iPhone:

@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}

يستهدف مقتطف CSS هذا جميع الأجهزة المحمولة بحد أقصى لعرض الجهاز يبلغ 480 بكسل (أي أجهزة iPhone) ويعطل تغيير حجم النص التلقائي في Safari داخل عنصر

في الختام، يهدف القياس التلقائي للنص في Mobile Safari إلى تحسين إمكانية القراءة على الشاشات الأصغر حجمًا. ومع ذلك، يمكن أن يؤدي هذا إلى سلوكيات غير متوقعة فيما يتعلق بحجم الخط. ومن خلال استخدام الخاصية -webkit-text-size-adjust، يمكن للمطورين استعادة السيطرة على حجم الخط وضمان عرض نص متسق عبر الأجهزة المختلفة، بما في ذلك أجهزة iPhone.