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

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

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

بهرحال روش انجام این مورد بسیار ساده است. برای کاربران موبایل فقط با افزودن تگ زیر در قسمت <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>