زمان مطالعه :3 دقیقه
سایز متن12
در دنیای امروز، استفاده از تلفن‌های هوشمند برای وبگردی به امری رایج تبدیل شده است. با این حال، گاهی اوقات بزرگنمایی ناخواسته صفحه هنگام اسکرول یا لمس عناصر می‌تواند تجربه کاربری ناخوشایندی را به وجود آورد. در این مقاله، به بررسی روش‌های مختلف جلوگیری از زوم یا بزرگنمایی صفحه سایت در موبایل می‌پردازیم و کدهای مربوط به هر روش را ارائه می‌کنیم.
ساده‌ترین روش برای جلوگیری از زوم، استفاده از متاتگ viewport در بخش head صفحه HTML است. این متاتگ به مرورگر می‌گوید که چگونه صفحه را بر روی دستگاه موبایل نمایش دهد. کد زیر نمونه‌ای از استفاده از متاتگ viewport برای جلوگیری از زوم است؛ برای استفاده از آن کافیست کد زیر را قبل از تگ </head> قالبتان قرار دهید :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
با استفاده از CSS می‌توان به طور خاص زوم را برای عناصر مختلف صفحه مانند تصاویر، متن و div ها غیرفعال کرد. کد زیر نمونه‌ای از غیرفعال کردن زوم برای تمام عناصر صفحه است:
html, body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
با استفاده از JavaScript می‌توان به طور پویا زوم را کنترل کرد. کد زیر نمونه‌ای از غیرفعال کردن زوم هنگام لمس صفحه است:
document.addEventListener('touchmove', function(event) {
event.preventDefault();
});
هدف: ارائه روش‌های مختلف جلوگیری از زوم ناخواسته صفحه هنگام وبگردی با موبایل
روش‌ها:
مزایا:
نکات مهم:
کلیه حقوق مادی و معنوی برای جاویس محفوظ می باشد و هرگونه کپی برداری شامل پیگرد قانونی می باشد.