پرش به مطلب اصلی

ویجت HTML

ویجت «HTML» برای نمایش محتوای سفارشی HTML استفاده می‌شود (مثل کدهای آماده، ویجت‌های وب، یا طراحی‌های خاص).

کاربردها​

  • نمایش کد HTML سفارشی داخل اپ.
  • افزودن ساختار یا محتوایی که با ویجت‌های آماده پوشش داده نمی‌شود.
  • قرار دادن کدهای سبک، embed یا بخش‌های اختصاصی.
هشدار

کد HTML سفارشی را فقط از منابع مطمئن وارد کنید و قبل از انتشار، نمایش آن را در موبایل و وب بررسی کنید.

فرم تنظیمات ویجت HTML
فرم تنظیمات ویجت «HTML» در پنل اپ‌ادیتور.

تنظیمات اصلی​

کد HTML​

در این بخش کد HTML سفارشی را وارد می‌کنید. این ویجت برای زمانی مناسب است که بخواهید یک بخش خاص، کد آماده، embed یا محتوایی خارج از ویجت‌های معمول اپ‌ادیتور نمایش دهید.

برای اینکه محتوای HTML روی موبایل بهتر و رسپانسیو نمایش داده شود، بهتر است تنظیم viewport را داخل بخش head قرار دهید و اندازه‌ها را تا حد امکان نسبی تعریف کنید.

نمونه کد:

<!doctype html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      body {
        margin: 0;
        font-family: sans-serif;
        line-height: 1.8;
        background: #f7f7f7;
      }

      .card {
        box-sizing: border-box;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        padding: 16px;
        background: #ffffff;
        border-radius: 12px;
      }

      img {
        max-width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h2>عنوان نمونه</h2>
      <p>این محتوا با عرض صفحه موبایل هماهنگ می‌شود و از کادر بیرون نمی‌زند.</p>
    </div>
  </body>
</html>

در این نمونه، width=device-width باعث می‌شود عرض صفحه HTML با عرض دستگاه هماهنگ شود و initial-scale=1 از بزرگ‌نمایی یا کوچک‌نمایی اولیه ناخواسته جلوگیری می‌کند. همچنین استفاده از max-width: 100% برای تصویرها کمک می‌کند عکس‌ها در صفحه‌های کوچک از کادر بیرون نزنند.

بزرگنمایی و دسترسی‌ها​

  • قابلیت بزرگنمایی دو انگشتی: اگر فعال باشد، کاربر می‌تواند محتوای HTML را با دو انگشت بزرگ‌تر یا کوچک‌تر کند.
  • افزودن دسترسی دریافت صدا از میکروفون: فقط وقتی فعال کنید که کد HTML شما واقعاً به میکروفون نیاز دارد.
  • افزودن دسترسی به دوربین: فقط برای کدهایی که به دوربین نیاز دارند؛ مثل اسکن یا تماس تصویری.
  • افزودن دسترسی به GPS: فقط برای محتوایی که به موقعیت مکانی کاربر نیاز دارد.
هشدار

کد HTML نامطمئن می‌تواند باعث نمایش نادرست یا تجربه ضعیف در اپ شود. کد را فقط از منبع قابل اعتماد وارد کنید و حتماً روی موبایل تست بگیرید.

نکته​

  • اگر هدف شما فقط نمایش متن، عکس یا دکمه است، بهتر است از ویجت‌های آماده اپ‌ادیتور استفاده کنید.
  • دسترسی‌ها را فقط وقتی فعال کنید که واقعاً لازم هستند؛ فعال کردن دسترسی‌های بی‌مورد باعث بی‌اعتمادی کاربر می‌شود.

نکات طراحی و تست​

  • جایگاه «ویجت HTML» را در چیدمان صفحه با اندازه‌های مختلف نمایش بررسی کنید.
  • عنوان، متن و فاصله‌گذاری اطراف ویجت را با سایر اجزای همان صفحه هماهنگ نگه دارید.
  • قبل از انتشار، تعامل کاربر با ویجت را روی دستگاه واقعی تست کنید؛ مخصوصاً اگر ویجت داخل گروه، تب، اسلاید یا فرم قرار دارد.