در دنیای امروز، استفاده از تلفنهای هوشمند برای وبگردی به امری رایج تبدیل شده است. با این حال، گاهی اوقات بزرگنمایی ناخواسته صفحه هنگام اسکرول یا لمس عناصر میتواند تجربه کاربری ناخوشایندی را به وجود آورد. در این مقاله، به بررسی روشهای مختلف جلوگیری از زوم یا بزرگنمایی صفحه سایت در موبایل میپردازیم و کدهای مربوط به هر روش را ارائه میکنیم.
نمونه ای از زوم سایت در موبایل :
روش جلوگیری از زوم سایت در موبایل :
استفاده از متاتگ viewport : (پیشنهادی)
سادهترین روش برای جلوگیری از زوم، استفاده از متاتگ viewport در بخش head صفحه HTML است. این متاتگ به مرورگر میگوید که چگونه صفحه را بر روی دستگاه موبایل نمایش دهد. کد زیر نمونهای از استفاده از متاتگ viewport برای جلوگیری از زوم است؛ برای استفاده از آن کافیست کد زیر را قبل از تگ </head> قالبتان قرار دهید :
استفاده از CSS :
با استفاده از CSS میتوان به طور خاص زوم را برای عناصر مختلف صفحه مانند تصاویر، متن و div ها غیرفعال کرد. کد زیر نمونهای از غیرفعال کردن زوم برای تمام عناصر صفحه است:
html, body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
استفاده از JavaScript :
با استفاده از JavaScript میتوان به طور پویا زوم را کنترل کرد. کد زیر نمونهای از غیرفعال کردن زوم هنگام لمس صفحه است:
document.addEventListener('touchmove', function(event) {
event.preventDefault();
});
مزایای جلوگیری از زوم سایت در موبایل :
- بهبود تجربه کاربری: زوم ناخواسته میتواند تجربه کاربری را مختل کند و پیمایش در صفحه را دشوار کند. جلوگیری از زوم به کاربران تجربه کاربری روانتر و لذتبخشتری ارائه میدهد.
- بهبود سئوی موبایل: گوگل و سایر موتورهای جستجو به وبسایتهایی که برای موبایل بهینهسازی شدهاند، رتبه بالاتری در نتایج جستجو میدهند. جلوگیری از زوم یکی از فاکتورهای مهم در بهینهسازی وبسایت برای موبایل است.
- کاهش بارگذاری: زوم میتواند باعث بارگذاری بیشتر صفحه و افزایش مصرف ترافیک داده شود. جلوگیری از زوم به بارگذاری سریعتر صفحه و کاهش مصرف ترافیک داده کمک میکند.
خلاصه مقاله :
هدف: ارائه روشهای مختلف جلوگیری از زوم ناخواسته صفحه هنگام وبگردی با موبایل
روشها:
- استفاده از متاتگ viewport
- استفاده از CSS
- استفاده از JavaScript
مزایا:
- بهبود تجربه کاربری
- بهبود سئوی موبایل
- کاهش بارگذاری
نکات مهم:
- ممکن است لازم باشد زوم را برای برخی عناصر خاص فعال کنید.
- قبل از استفاده از کدها، آنها را در وبسایت خود آزمایش کنید.
از متا تگ viewport باید کجا استفاده کرد و کد آن رو کجا باید وارد کرد؟
باید تو هدر و قبل از تگ قرار بدید.
اگه از وردپرس استفاده میکنید بایذ از قسمت نمایش، ویرایشگر پوسته رو انتخاب کنید و بعد به دنبال فایل header.php بگردید، سپس این کد رو قبل از تگ قرار بدید و ذخیره رو بزنید
ممنون