ضبط CSS للأجهزة المحمولة: فهم قيود الوسائط المحمولة

عند محاولة تخصيص CSS خصيصًا لمتصفحات الجوال مثل iPhone وAndroid، من الضروري أن تكون على دراية بـ قيود @media المحمولة. على الرغم من أن هذا النوع من استعلام الوسائط قد تم استخدامه في الماضي، إلا أنه غير مدعوم عالميًا على الأجهزة المحمولة، خاصة تلك التي تتمتع بقدرات العرض المتقدمة.

لتحقيق التأثير المطلوب، فكر في طرق بديلة:

استخدام استعلامات شاشة @media

بدلاً من @media المحمولة، استخدم استعلامات شاشة @media. تمكنك هذه الاستعلامات من استهداف الأجهزة بناءً على خصائص معينة للشاشة، مثل الدقة وعرض الجهاز. على سبيل المثال، لتصميم صفحة ويب لجهاز iPhone:

@media screen and (max-device-width: 480px) {
  body {
    color: red;
  }
}

الاستفادة من استعلامات ميزات CSS

بدلاً من ذلك، يمكن استخدام استعلامات ميزات CSS لاكتشاف إمكانات متصفح معينة. على سبيل المثال، للتحقق مما إذا كانت استعلامات الوسائط مدعومة:

@supports (media) {
  /* Styles to be applied if media queries are supported */
}

استهداف دقة الجهاز

لاستهداف الأجهزة ذات دقة معينة، يمكن دمج استعلامات @media مع ميزة وسائط الدقة:

@media screen and (max-device-width: 480px) and (resolution: 163dpi) {
  body {
    color: blue;
  }
}

مزيد من الموارد

• [توصية مرشح W3C لاستعلامات الوسائط](https://www.w3.org/TR/css3-mediaqueries/)
• [مطور Webkit للهواتف المحمولة من Apple الدليل](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/GettingStarted/GettingStarted.html)
• [قائمة منفصلة: تصميم لمنافذ عرض متعددة](https: //alistapart.com/article/viewports)