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

چرا باید زوم سایت رو در موبایل غیر فعال کرد؟

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

البته باید توجّه کنی که این کار روی دسترسی‌پذیری (accessibility) تأثیر می‌ذاره؛ چون بعضیا به زوم نیاز دارن، ولی کلیت موضوع اینه که وقتی طراحی درست و واکنش‌گرا باشه، اون زوم‌های ناخواسته فقط باعث ایجاد مشکل می‌شن.

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

حالا وقتشه بری سراغ اصل مطلب. اگه سوالت اینه که دقیقاً نحوه غیر فعال کردن زوم سایت در موبایل چطوریه، جواب اینه توی سایت وردپرسی فقط کافیه یک متا تگ viewport تو فایل header.php یا از طریق اکشن wp_head اضافه بشه. این کد رو ببین:

phpCopyEditadd_action('wp_head', function(){
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">';
}, 1);

یا اگه راحت‌تری، مستقیماً تو header.php قرارش بده:

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

این دقیقاً همون چیزی‌ست که تو سوال اول گفتیم، ولی این‌بار برای نحوه غیر فعال کردن زوم سایت در موبایل در وردپرس:

• width=device-width باعث می‌شه عرض صفحه همون عرض موبایل باشه،
• initial-scale=1.0 از همون اول مقیاس عادی صفحه باشه،
• maximum-scale=1.0 مرز زوم رو می‌ذاره روی همون اول،
• user-scalable=no هم دست کاربر رو برای زوم قطع می‌کنه.
  این مطمئناً روی وردپرس کار می‌کنه و حتی می‌تونی فقط برای صفحات خاص (مثلاً فرم) از شرط is_page() یا is_checkout() استفاده کنی تا فقط اون صفحات خاص این متا رو داشته باشن و باقی سایت همچنان قابلیت زوم داشته باشه.

نکات تکمیلی برای وردپرسی‌ها

یادت باشه که نحوه غیر فعال کردن زوم سایت در موبایل فقط نیمی از راهه. نیمی دیگه اینه که طراحی سایتت واکنش‌گرا و فونتش خوانا باشه. وردپرس پر از تم‌های آماده‌ست ولی بعضی‌شون فونتشون کمتر از 16px هست، که باعث می‌شه روی آیفون وقتی فرم‌ها فوکوس می‌شن، مرورگر خودش زوم کنه. برای جلوگیری از اون مشکل، باید حداقل سایز فونت input ها رو 16px تنظیم کنی:

cssCopyEditinput, select, textarea {
  font-size: 16px !important;
}

این براساس تجربه کاربران و فروم‌ها مثل اونایی که توی دوتا گپ هستن توصیه شده. اگه اینکار رو انجام بدی، ممکنه اصلاً دیگه نیازی به user-scalable=no هم نداشته باشی، چون خود مرورگر دیگه زوم اتوماتیک نمی‌کنه.

ملاحظات دسترسی‌پذیری

دسترسی‌پذیری برای افراد کم‌بینا خیلی مهمه. استاندارد WCAG Level AA می‌گه باید اجازه بدم کاربر بتونه تا 200٪ زوم کنه بدون اینکه چیپ سایت بشه. یعنی اگه تمام سایت رو بخوای زوم رو ببندی، ممکنه خطا دریافت کنی و برای این دسته از افراد تجربه بدی بسازی. پیشنهاد به این هستش که فقط تو موارد بسیار خاص و محدود، مثل صفحات سایت که طراحی‌ش خیلی دقیق هست (اپ‌مانند باشن)، این کار رو انجام بدی. در غیر این صورت یا اصلاً این کد رو نگذار، یا فقط تو صفحات خاص. استراتژی خوب اینه که فقط تو صفحات پرداخت یا سبد خرید، این محدودیت اعمال بشه، نه کل سایت.

روش جایگزین در وردپرس بدون کد

اگر دوست نداری کد اضافه کنی یا نگران هستی که بعداً با آپدیت تم از بین بره، یه راه ساده برای نحوه غیر فعال کردن زوم سایت در موبایل هست استفاده از افزونه Accessibility Checker. این افزونه گزینه‌ای داره به اسم Make viewport scalable که متا تگ viewport رو بررسی و در صورت یافتن user-scalable=no اون رو حذف می‌کنه یا اصلاح می‌کنه. همین‌طوری کاری انجام داده باشی. فقط باید یه پلاگین نصب کنی، فعالش کنی، و تیک مربوط بهش رو بزنید. سریع، راحت و بدون دردسر!

نتیجه‌گیری

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

1. متای viewport با ویژگی user-scalable=no رو تنها در صفحات خاص (مثل فرم یا پرداخت) اضافه کن
2. فونت input رو حداقل 16px کن تا زوم اتوماتیک مرورگر فعال نشه
3. اگر دسترسی‌پذیری واست مهمه (معمولاً باید باشه)، این محدودیت رو فقط در جاهای ضروری اعمال کن
4. یا افزونه Accessibility Checker رو نصب کن و اجازه بده خودش متا تگ رو مدیریت کنه

با این راهکارها، هم ظاهر سایت تمیز می‌مونه، هم کاربر موبایلت تجربه بهتری داره، هم مشکلی برای دسترسی‌پذیری پیش نمیاد.

سوالات متداول