عرض لافتات (بانرات) مختلفة على الهاتف المحمول وسطح المكتب

💡 رغم أن لافتاتنا غير مستجيبة، يمكنك بسهولة إظهار وإخفاء أحجام مختلفة حسب الجهاز. ستوضح لك نصيحة صفحات التنسيق النمطية (CSS) البسيطة هذه الطريقة.

أولاً، تحتاج إلى إضافة صفحات التنسيق النمطية (CSS) في رأس الصفحة <head>:

<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>

نذكر أنه في هذه الشفرة إذا كانت فئة العنصر هي mobileShow، فيجب عرضها فقط على الهاتف المحمول ويجب أن يكون mobileHide متاحًا فقط لسطح المكتب.

بعد ذلك، ما عليك سوى إضافة عناصر <div> وشفرة إعلان أدستيرا إلى نص الصفحة:

<div class="mobileShow"> Your code snippet for mobile </div>

<div class="mobileHide"> Code snippet for desktop only </div>

على سبيل المثال، يمكنك التبديل بين اللافتات 728 × 90 و 320 × 50.

إليك ما يبدو في صفحة HTML العادية:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://glitch.com/favicon.ico" />

    <title>Hello World!</title>

    <meta name="robots" content="index,follow" />
    <meta property="og:title" content="Hello World!" />
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.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>
  </head>
  <body>
    <!-- the wrapper and content divs set margins and positioning -->
    <div class="wrapper">
      <div class="content" role="main">
        <!-- this is the start of content for our page -->
        <h1 class="title">Hello World!</h1>

      </div>
     <div class="mobileShow">
<script type="text/javascript">
	atOptions = {
		'key' : '0303d891ce479628509ef2972f7239d6',
		'format' : 'iframe',
		'height' : 300,
		'width' : 160,
		'params' : {}
	};
	document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://wizardunstablecommissioner.com/0303d891ce479628509ef2972f7239d6/invoke.js"></scr' + 'ipt>');
</script> </div> 
      <div class="mobileHide"> <script type="text/javascript">
	atOptions = {
		'key' : 'd6744e6de34f83085d99817829bdfc87',
		'format' : 'iframe',
		'height' : 90,
		'width' : 728,
		'params' : {}
	};
	document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://wizardunstablecommissioner.com/d6744e6de34f83085d99817829bdfc87/invoke.js"></scr' + 'ipt>');
</script></div>
    </div>

  </body>
</html>

https://mobile-desktop-adsterra.glitch.me/

WordPress

هذا يعمل أيضًا على موقع WordPress الخاص بك. أولاً، ستحتاج إلى إضافة فئات CSS إلى ملف 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 { d

4.انقر على "تحديث الملف"

بعد ذلك، ما عليك سوى إضافة عناصر <div> ومقتطفات شفرة أدستيرا إلى أي نص صفحة:

<div class="mobileShow">
<script type="text/javascript">
your adsterra code for mobile
 </div> 
<div class="mobileHide"> <script type="text/javascript">
your adsterra code for desktop
</div>

هذا مثال من ملف header.php:

Blogger

سيدعم موقع الويب المستند إلى بلوغر هذا أيضًا. تمامًا كما هو الحال مع ووردبريس ، أضف CSS أولاً:

اذهب إلى "القالب" من القائمة اليمنى
انقر على زر القائمة المنسدلة بجوار "التعديلات" واختر "تعديل HTML"
ألصق CSS في <head>:

<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>

4. انقر على "حفظ" في الزاوية اليمنى العليا

يمكنك الآن استخدام كلا الفئتين في أي مكان. على سبيل المثال، لعرض لافتات مختلفة في ترويسة الصفحة:

اذهب إلى "التصميم" (Layout) من القائمة اليمنى
انقر على "إضافة أداة" واختر "HTML / JavaScript" من القائمة
أدخل الشفرة التالية مع مقتطفات شفرة الإعلان:

<div class="mobileShow">
<script type="text/javascript">
your adsterra code for mobile
 </div> 
<div class="mobileHide"> <script type="text/javascript">
your adsterra code for desktop
</div>

4. انقر على "حفظ" في الزاوية اليمنى العليا

التحقق مما إذا كان يعمل

تتيح لك Chrome Dev Tools إمكانية التحقق من مظهر موقع الويب الخاص بك على مختلف الأجهزة.

افتح موقع الويب الخاص بك وانقر بزر الفأرة الأيمن في أي مكان بالصفحة واختر "فحص" ؛ سيتم فتح لوحة Chrome Dev Tools
انقر على Toggle Device Toolbar في الزاوية اليمنى العليا من اللوحة
اختر الجهاز المحمول من القائمة المنسدلة