فهرست مطالب
وقتی سایت در موبایل بهم ریخته است، علت معمولاً یکی از این‌هاست: قالب ریسپانسیو نیست، بخشی از صفحه عرض ثابت (مثلاً ۱۲۰۰ پیکسل) دارد، تگ meta viewport حذف شده، یا CSS نسخه راست‌چین قالب ایراد دارد. چون بیشتر بازدیدکنندگان سایت‌های ایرانی با موبایل می‌آیند و گوگل هم نسخه موبایل را ملاک ایندکس قرار میدهد، این مشکل را باید جدی گرفت.
نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵
چرا این اتفاق می‌افتد؟
- قالب قدیمی یا غیرریسپانسیو است و برای صفحه‌های کوچک طراحی نشده است.
- جدول، تصویر، iframe یا بخش صفحهساز عرض ثابت دارد و از صفحه بیرون می‌زند.
- تگ
<meta name="viewport">در هدر نیست و مرورگر صفحه را مثل دسکتاپ کوچک‌شده نشان میدهد. - در نسخه راست‌چین، فاصله‌ها و موقعیت‌ها با left/right ثابت نوشته شده و در RTL جابه‌جا میشوند.
- در صفحهساز (مثل المنتور) تنظیمات نمای موبایل جداگانه انجام نشده است.
چه کار کنیم؟
قبل از هر تغییری از فایل‌ها و دیتابیس سایت بکاپ کامل بگیرید؛ بعد این مراحل را به ترتیب جلو بروید:
- سایت را در گوشی واقعی و در حالت Device Toolbar مرورگر کروم باز کنید و صفحه‌هایی که بهم ریخته‌اند را فهرست کنید.
- در سورس صفحه بررسی کنید تگ viewport با مقدار
width=device-width, initial-scale=1وجود دارد. - در ابزار توسعه‌دهنده عنصری را که از عرض صفحه بیرون زده پیدا کنید و عرض ثابتش را به max-width: ۱۰۰% تغییر دهید.
- برای جدول‌ها اسکرول افقی داخلی بگذارید و تصاویر را با height: auto ریسپانسیو کنید.
- در صفحهساز، نمای موبایل هر بخش را جداگانه تنظیم کنید و فاصله‌ها و اندازه فونت را اصلاح کنید.
- بعد از تغییر، کش سایت را پاک و صفحه‌ها را دوباره روی چند گوشی تست کنید.
| نشانه | علت محتمل | اصلاح |
|---|---|---|
| اسکرول افقی کل صفحه | یک عنصر با عرض ثابت | max-width: ۱۰۰% برای آن عنصر |
| همه چیز ریز مثل دسکتاپ | نبود تگ viewport | افزودن meta viewport |
| منو یا آیکن در سمت اشتباه | CSS ناسازگار با RTL | استفاده از ویژگی‌های منطقی CSS |
| ستون‌ها روی هم افتاده‌اند | تنظیم نشدن نمای موبایل صفحهساز | تنظیم جداگانه موبایل |
نکته: اگر قالب شما اساساً ریسپانسیو نیست، وصله کردن CSS صفحه‌به‌صفحه معمولاً راه‌حل پایداری نیست و با هر به‌روزرسانی دوباره خراب می‌شود. در این حالت جایگزینی قالب یا بازطراحی منطقی‌تر است؛ ولی اگر فقط چند بخش مشکل دارد، اصلاح موضعی کاملاً کافی است.
نقش تگ viewport را در مستند MDN درباره meta viewport ببینید. اگر به فکر بازطراحی هستید، راهنمای طراحی سایت siloow و برای مشکل منوی موبایل، منوی موبایل سایت باز نمی‌شود را بخوانید.
قبل از اصلاح، روی چند دستگاه تست کنید
بهم‌ریختگی موبایل ممکن است فقط روی یک اندازه صفحه یا یک مرورگر خاص دیده شود. سایت را روی چند گوشی با اندازه‌های مختلف و در مرورگرهای کروم و سافاری باز کنید. در کامپیوتر هم می‌توانید با ابزار توسعه‌دهنده کروم (F12 و نمای دستگاه) اندازه‌های مختلف را شبیه‌سازی کنید. صفحاتی که مشکل دارند و نوع مشکل (بیرون زدن متن، تصویر بزرگ، منو یا دکمه‌های روی هم) را یادداشت کنید. این فهرست، اصلاح را برای خودتان یا متخصص سریع‌تر و دقیق‌تر می‌کند.
کی بهتر است از متخصص کمک بگیرید؟
اگر مشکل در اکثر صفحه‌هاست، قالب نال یا قدیمی دارید، یا اصلاح CSS بخش‌های دیگر را خراب می‌کند، با متخصص مشورت کنید. تیم siloow قالب‌های اختصاصی وردپرس را از ابتدا موبایل‌محور و راست‌چین طراحی می‌کند و می‌تواند تشخیص دهد اصلاح بصرفه است یا بازطراحی.
برای بررسی نمایش موبایل سایت‌تان فرم تماس siloow را پر کنید؛ تیم ما در اولین فرصت با شما تماس می‌گیرد. درباره خدمات طراحی سایت siloow هم بیشتر بدانید.
سوالات متداول
چطور بفهمم سایتم ریسپانسیو است؟
سایت را در گوشی باز کنید و ببینید بدون زوم و اسکرول افقی قابل‌خواندن است. ابزار Device Toolbar کروم هم اندازه‌های مختلف را شبیه‌سازی می‌کند.
بهم ریختگی موبایل روی سئو اثر دارد؟
گوگل نسخه موبایل صفحه را برای ایندکس و رتبهبندی ملاک قرار میدهد؛ اگر محتوا در موبایل ناقص یا غیرقابلاستفاده باشد، تجربه کاربر و عملکرد صفحه آسیب میبیند.
چرا سایت در دسکتاپ درست است ولی در موبایل نه؟
چون استایلهای موبایل جدا تعریف میشوند و ممکن است در قالب یا صفحهساز تنظیم نشده یا با یک کد سفارشی خراب شده باشند.
مشکل
سایت در موبایل بهم ریخته و درست نمایش داده نمی‌شود
علائم و نشانه‌ها
- اسکرول افقی، متن ریز، ستون‌های روی هم، منوی جابه‌جا
علت‌های احتمالی
- قالب غیرریسپانسیو، عرض ثابت، نبود viewport، CSS ناسازگار با RTL
راه‌حل کوتاه
viewport را بررسی، عرض‌های ثابت را اصلاح و نمای موبایل صفحهساز را تنظیم کنید؛ در قالب غیرریسپانسیو بازطراحی را بسنجید.
ابزارهای موردنیاز
- Chrome DevTools، صفحهساز المنتور
