آموزش های HTML CSSوب مستر

نحوه غیرفعال کردن زوم یا بزرگنمایی صفحات وب در گوشی موبایل

گاهی ممکن است به عنوان یک توسعه دهنده وب ، بخواهید امکان اینکه بازدیدکنندگان سایت شما بخواهند صفحات را توسط مرورگر، زوم یا بزرگنمایی را غیرفعال کنید. با غیرفعال کردن این ویژگی اگر سایت شما به طور استاندارد طراحی شده باشد ، حالت بیسار مشابه و جذابی برای کاربر خواهد داشت. اگر چه برخی استاندارد ها ، غیرفعال کردن بزرکنمایی را توصیه نمی کنند. در این آموزش نحوه غیرفعال کردن زوم یا بزرگنمایی صفحات وب در گوشی موبایل و مرورگر دسکتاپ را آموزش خواهیم داد.

نحوه غیرفعال کردن زوم یا بزرگنمایی صفحات وب در گوشی موبایل و مرورگر دسکتاپ

بهرحال روش انجام این مورد بسیار ساده است. برای کاربران موبایل فقط با افزودن تگ زیر در قسمت <head>  کد های HTML  خود می توانید آن را غیرفعال نمایید.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">

برای غیرفعال کردن بزرگنمایی در مرورگرهای دسکتاپ نیز از کد زیر بعد از تگ <body> استفاده کنید:

<script>
  document.body.addEventListener("wheel", e=>{
    if(e.ctrlKey)
      e.preventDefault();//prevent zoom
  });
</script>

نوشته های مشابه

دکمه بازگشت به بالا