💡 رغم أن لافتاتنا غير مستجيبة، يمكنك بسهولة إظهار وإخفاء أحجام مختلفة حسب الجهاز. ستوضح لك نصيحة صفحات التنسيق النمطية (CSS) البسيطة هذه الطريقة.
تثبيت
كل ما عليك فعله هو فقط إضافة هذا الرمز بالضبط حيث تريد ظهور اللافتات:
<style type="text/css">
.mobileShow {display: none;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileShow {display: inline;}
}
.mobileHide { display: inline; }
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileHide { display: none;}
}
</style>
<div class="mobileShow"> Your code snippet for mobile </div>
<div class="mobileHide"> Code snippet for desktop only </div>
❗️لا تنسَ إدخال رموز الشعار من منطقتك الشخصية بدلاً من "مقتطف الرمز الخاص بك للجوال" و"مقتطف الرمز لسطح المكتب فقط".
يمكنك استخدام أي طريقة للتثبيت: مباشرة إلى HTML (ولكن ليس في قسم <head>)، عن طريق إضافة عناصر واجهة المستخدم / الأدوات الذكية، وعنصر HTML المخصص، وما إلى ذلك.
المجموعة الأمثل هي لافتات مقاس 728 × 90 و320 × 50، ومع ذلك، يمكنك اختيار أي لافتة تريدها.
التحقق مما إذا كان يعمل
تتيح لك Chrome Dev Tools إمكانية التحقق من مظهر موقع الويب الخاص بك على مختلف الأجهزة.
افتح موقع الويب الخاص بك وانقر بزر الفأرة الأيمن في أي مكان بالصفحة واختر "فحص" ؛ سيتم فتح لوحة Chrome Dev Tools
انقر على Toggle Device Toolbar في الزاوية اليمنى العليا من اللوحة
اختر الجهاز المحمول من القائمة المنسدلة