سایتم روی گوشی بههم ریخته؛ چرا و چطور درستش کنم؟
سایتم روی گوشی بههم ریخته؟ چهار دلیل رایجش رو ساده میبینیم، یاد میگیری خودت با مرورگر تستش کنی و چطور از AI بخوای همونها رو درست کنه.
اگه سایتم روی گوشی بههم ریخته جمله این چند روزته، خبر خوب اینه که تقریباً همیشه یکی از چهار تا دلیل تکراریه و هیچکدومشون هم یعنی کدت خرابه.
جواب کوتاه: صفحهت ریسپانسیو (Responsive) نیست، یعنی خودش رو با عرض صفحه گوشی جمع نمیکنه. معمولاً یا یه خط کوچیک به اسم viewport تو فایل HTML جا افتاده، یا جایی عرض ثابت گذاشته شده، یا یه عکس بزرگ صفحه رو کشیده، یا تو سایت فارسی جهت راستبهچپ درست تعریف نشده.
ریسپانسیو یعنی چی؟
ریسپانسیو یعنی صفحهت مثل آب توی لیوانه: هر لیوانی بذاریش، شکل همون رو میگیره. رو مانیتور پهن، سه ستون کنار هم؛ رو گوشی باریک، همون سه تا زیر هم.
نقطه مقابلش صفحهایه که مثل یه عکس چاپشدهست: عرضش ثابته و اگه لیوان کوچیکتر باشه، از لبهها میزنه بیرون. نتیجهش همون چیزیه که رو گوشی میبینی: نوار پایین صفحه که به چپ و راست میلغزه، متن ریز، دکمهای که نصفش بیرون از کادره.
نکته مهم: این یه مشکل ظاهریه، نه خرابی سایت. سایتت بالا هست و کار میکنه؛ فقط چیدمانش برای صفحه کوچیک فکر نشده.
چهار دلیلی که معمولاً مقصرن
۱. خط viewport تو HTML نیست
این رایجترین دلیله و شاید سی ثانیه وقت ببره. گوشیها بهصورت پیشفرض وانمود میکنن صفحهشون پهنه (حدود ۹۸۰ پیکسل) و بعد کل صفحه رو کوچیک میکنن تا جا بشه. نتیجهش سایتیه که انگار از دور عکس گرفتن ازش: همه چی هست، ولی ریز.
اون خطی که به گوشی میگه «نه، با عرض واقعی خودت حساب کن» اینه و باید داخل <head> باشه:
<meta name="viewport" content="width=device-width, initial-scale=1" />اگه با ابزارهای امروزی (مثل Next.js یا هر قالب آمادهای) کار میکنی معمولاً خودش هست، ولی تو فایل HTML خامی که AI برات ساخته خیلی وقتها جا میفته. اول از همه این رو چک کن.
۲. یه جایی عرض ثابت گذاشته شده
هر جا تو استایلها عددی مثل width: 1200px باشه، اون بخش رو هر صفحهای همونقدر پهن میمونه، حتی رو گوشیای که ۳۹۰ پیکسل عرض داره. همین یه تیکه کافیه تا کل صفحه به چپ و راست بلغزه.
راهحلش سادهست: بهجای عرض ثابت، سقف عرض تعریف کن. یعنی «حداکثر اینقدر پهن شو، ولی اگه صفحه کوچیکتر بود خودت رو جمع کن». اگه چند تا ستون کنار هم داری، باید بگی رو صفحه باریک زیر هم بشینن.
۳. عکسها بزرگترن از صفحه
عکسی که عرض واقعیش ۲۰۰۰ پیکسله و کسی بهش نگفته کوچیک شو، رو گوشی همونقدر پهن میمونه و صفحه رو میکشه. همین اتفاق برای جدولهای عریض و کدهای طولانی هم میفته.
این مورد یه عارضه جانبی هم داره: عکس سنگین رو اینترنت موبایل کند باز میشه. اگه سایتت هم بههم ریخته و هم کنده، چرا بعضی سایتها سریعاند و بعضی نه رو هم یه نگاه بنداز.
۴. مشکل راستبهچپ تو سایتهای فارسی
این یکی مخصوص ماست و AI هم زیاد اشتباهش میکنه. اگه سایتت فارسیه ولی به مرورگر نگفتی که زبانش فارسی و جهتش راستبهچپه، نتیجهش میشه صفحهای که رو دسکتاپ شاید قابل تحمل باشه ولی رو گوشی کاملاً بههم میریزه.
نشونههاش رو میشناسی:
- متن فارسی از سمت چپ شروع میشه.
- نقطه یا علامت سوال آخر جمله میپره اول خط.
- فاصلهها قرینهان: چیزی که باید از راست فاصله بگیره، از چپ گرفته.
- عددها و کلمههای انگلیسی وسط جمله فارسی جابهجا میشن.
دو تا کار پایه لازمه: تگ اصلی صفحه باید زبان و جهت رو مشخص کنه، و تو استایلها بهجای «چپ» و «راست» ثابت، از حالتهایی استفاده بشه که با جهت صفحه بچرخن. این دومی همونیه که AI معمولاً رعایت نمیکنه و باید صریح ازش بخوای.
خودم چطور تستش کنم؟
لازم نیست ده تا گوشی داشته باشی. مرورگر خودت یه حالت شبیهساز گوشی داره:
- سایت رو تو کروم (یا فایرفاکس) باز کن.
- کلیک راست کن و گزینه Inspect رو بزن تا پنل ابزار توسعهدهنده باز شه.
- بالای اون پنل یه آیکون کوچیک گوشی و تبلت هست؛ بزنش. اسم این حالت Device Mode هست.
- از منوی بالای صفحه یه گوشی رایج انتخاب کن و صفحه رو بالا پایین کن.
دو تا چیز رو مخصوصاً نگاه کن: اینکه صفحه به چپ و راست میلغزه یا نه، و اینکه دکمهها با انگشت (نه با ماوس) قابل زدن هستن یا نه.
و در آخر، یه بار هم با گوشی واقعی خودت بازش کن. شبیهساز اندازه رو درست نشون میده ولی فونت فارسی، سرعت لود و کیبورد گوشی رو نه. اگه کلاً سایتت هنوز آنلاین نشده و فقط رو لپتاپت اجرا میشه، اول مسیرش رو تو سایتم رو با AI ساختم؛ حالا چطور آنلاینش کنم ببین.
چطور از AI بخوام درستش کنه؟
اگه کد رو با AI نوشتی، همون AI معمولاً میتونه درستش کنه؛ فقط باید دقیق بگی چی دیدی. «سایتم رو گوشی خرابه» جواب خوبی نمیگیره.
سه تا چیز رو تو درخواستت بذار:
- دقیقاً چی دیدی و کجا: «تو صفحه اصلی، رو گوشی، صفحه از چپ و راست میلغزه و منو بیرون کادره.»
- شرایط: عرض صفحه (مثلاً ۳۹۰ پیکسل)، مرورگر، و اینکه سایت فارسی و راستبهچپه.
- چیزی که نباید عوض شه: «فقط چیدمان موبایل رو درست کن، نسخه دسکتاپ و متنها رو دست نزن.»
یه درخواست خوب تقریباً این شکلیه:
«این پروژه یه سایت فارسی راستبهچپه. رو عرض ۳۹۰ پیکسل صفحه افقی میلغزه. اول چک کن تگ viewport تو head هست یا نه، بعد بگرد ببین کجا عرض ثابت یا عکس بدون سقف عرض داریم. فقط همونها رو اصلاح کن، تغییر هر فایل رو جداگونه بهم بگو و دلیلش رو بنویس.»
دو تا نکته که وقتت رو نجات میده: یه مشکل رو در هر درخواست بده، و قبل از هر تغییر بزرگ یه نسخه از کد رو جایی برای خودت نگه دار تا اگه بدتر شد بتونی برگردی. اگه AI وسط کار گیج شد و هر بار یه چیز دیگه رو خراب کرد، وقتی کدی که AI نوشته کار نمیکنه دقیقاً درباره همین حالته.
سوالهای پرتکرار
چرا سایتم رو لپتاپ درسته ولی رو گوشی بههم ریخته؟
چون تو موقع ساختن، پنجره مرورگرت پهن بوده و چیدمان برای همون پهنا جواب میداده. رو صفحه باریک، هر جایی که عرضش ثابت بوده یا جمع شدنش تعریف نشده، خودش رو نشون میده.
فقط اضافه کردن تگ viewport مشکل رو حل میکنه؟
گاهی آره، مخصوصاً اگه کل صفحه ریز دیده میشه. ولی اگه بعد از اضافه کردنش هنوز صفحه به چپ و راست میلغزه، دلیل دوم یا سومه: یه عرض ثابت یا یه عکس بزرگتر از صفحه.
برای موبایل باید یه سایت جدا بسازم؟
نه. یه سایت مینویسی و همون رو طوری تنظیم میکنی که رو هر اندازهای جمع و جور شه. سایت جدا یعنی دو برابر کار برای هر تغییر.
این مشکل روی رتبه سایتم تو گوگل اثر داره؟
آره، غیرمستقیم. گوگل نسخه موبایل رو معیار میگیره و کاربری که صفحه بههم ریخته میبینه سریع میبنده. بهتره قبل از اینکه سر و کله بازدیدکنندهها پیدا شه درستش کنی.
خلاصه
- بههم ریختن سایت رو گوشی یعنی چیدمان ریسپانسیو نیست، نه اینکه سایتت خرابه.
- اول از همه تگ viewport رو تو
<head>چک کن؛ رایجترین دلیله. - بعدش دنبال عرض ثابت، عکس بزرگتر از صفحه و جدول عریض بگرد.
- تو سایت فارسی، زبان و جهت راستبهچپ رو صریح تعریف کن؛ AI معمولاً خودش این کار رو نمیکنه.
- با حالت گوشی مرورگر تست کن، ولی حرف آخر رو گوشی واقعی بزن.
اگه تازه سایتت رو آنلاین کردی و میخوای بدونی بعدش چه کارهایی سرت میریزه، بعد از Launch؛ نگهداری و آپدیت رو بخون.