تنظیم عرض وبسایت در مرورگر هنگام طراحی یا آزمایش یک صفحه بسیار مهم است. توسعهدهندگان اغلب نیاز دارند اندازه مرورگر را تغییر دهند تا بررسی کنند که وبسایت آنها چگونه به اندازههای مختلف صفحه نمایش واکنش نشان میدهد. خوشبختانه، مرورگرهای مدرن شامل ابزارهای توسعهدهنده (DevTools) داخلی هستند که تغییر عرض وبسایت را بدون ویرایش طراحی یا تغییر دادن کد CSS فراهم میکنند. این راهنما به شما نحوه تنظیم عرض وبسایت با استفاده از DevTools در گوگل کروم، موزیلا فایرفاکس و مایکروسافت اج را آموزش میدهد.
فهرست مطالب
چرا تنظیم عرض وبسایت در مرورگر انجام میشود؟
قبل از اینکه به مراحل بپردازیم، درک این نکته ضروری است که چرا تنظیم عرض وبسایت ضروری است. در اینجا چند دلیل کلیدی آورده شده است:
- تست طراحی واکنشگرا: اطمینان از اینکه وبسایت شما در اندازههای مختلف صفحه نمایش خوب به نظر میرسد، برای یک تجربه کاربری روان ضروری است.
- اشکالزدایی مشکلات طرحبندی: برخی از عناصر ممکن است در عرضهای خاصی دچار مشکل شوند، بنابراین آزمایش به شما کمک میکند تا این مشکلات را شناسایی و برطرف کنید.
- بهینهسازی موبایل: از آنجایی که دستگاههای تلفن همراه اندازه صفحه نمایش متفاوتی دارند، شبیهسازی آنها به شما امکان میدهد بررسی کنید که آیا همه چیز به درستی کار میکند یا خیر.
- تحلیل عملکرد: تغییر عرض همچنین میتواند به شما کمک کند تا ببینید که اندازههای مختلف صفحه نمایش چگونه بر سرعت بارگذاری صفحه و عملکرد آن تأثیر میگذارند.
حالا که میدانید چرا تنظیم عرض وبسایت مهم است، بیایید مراحل آن را در مرورگرهای مختلف بررسی کنیم.
نحوه تنظیم عرض وبسایت در مرورگر با استفاده از DevTools
مرورگرهای مدرن راهی آسان برای بررسی و تغییر پویای عرض وبسایت ارائه میدهند. در زیر، دستورالعملهای گام به گام برای کروم، فایرفاکس و اج را خواهید یافت.
ابزارهای توسعهدهنده گوگل کروم (Chrome DevTools)
گوگل کروم ابزارهای قدرتمندی برای آزمایش و تنظیم طرحبندی ارائه میدهد. برای تغییر عرض وبسایت، این مراحل را دنبال کنید:
- گوگل کروم را باز کنید و به وبسایتی که میخواهید بررسی کنید، بروید.
- کلید F12 را روی صفحه کلید خود فشار دهید. یا در هر جایی از صفحه کلیک راست کرده و گزینه Inspect را انتخاب کنید.
- سپس، روی Toggle device toolbar (یک آیکون کوچک موبایل در گوشه سمت چپ بالای DevTools) کلیک کنید یا کلیدهای Ctrl + Shift + M (ویندوز/لینوکس) یا Cmd + Shift + M (مک) را فشار دهید.
- وقتی حالت طراحی واکنشگرا ظاهر شد، میتوانید عرض را به چند روش تنظیم کنید:
- روی منوی کشویی در بالا کلیک کنید و دستگاههای الکترونیکی از پیش تعیین شده را انتخاب کنید (از نوار ابزار بالا قسمت چپ).
- مقدار عرض دلخواه را در فیلد ورودی وارد کنید (از نوار ابزار بالا قسمت چپ).
- لبه سمت راست صفحه را بکشید تا عرض به صورت پویا افزایش یا کاهش یابد.
- از نوار ابزار باز شده بالا، نقاط شکست ارائه شده توسط کروم را انتخاب کنید.
- پس از ایجاد این تغییرات، مشاهده کنید که وبسایت شما چگونه با عرضهای مختلف صفحه نمایش سازگار میشود. در صورت لزوم، تنظیمات طراحی را بر این اساس انجام دهید.
ابزارهای توسعهدهنده موزیلا فایرفاکس (Firefox Developer Tools)
موزیلا فایرفاکس ابزارهای مشابهی را ارائه میدهد که به توسعهدهندگان کمک میکند تا عرض وبسایت را به طور مؤثر تنظیم کنند. برای تغییر عرض، این مراحل را دنبال کنید:
- موزیلا فایرفاکس را باز کنید و از وبسایتی که میخواهید آزمایش کنید، بازدید کنید.
- کلید F12 را فشار دهید یا روی صفحه کلیک راست کرده و گزینه Inspect را انتخاب کنید.
- روی آیکون Responsive Design Mode کلیک کنید، یا کلیدهای Ctrl + Shift + M (ویندوز/لینوکس) یا Cmd + Shift + M (مک) را فشار دهید.
- پس از فعال شدن این حالت، میتوانید عرض را با استفاده از روشهای مختلف تغییر دهید:
- از منوی کشویی، دستگاههای الکترونیکی از پیش تعیین شده را انتخاب کنید (از نوار ابزار بالا قسمت چپ).
- برای تنظیم عرض دلخواه، مقدار پیکسل را به صورت دستی وارد کنید (از نوار ابزار بالا قسمت چپ).
- لبههای سمت راست را بکشید تا به صورت تعاملی اندازه آن تغییر کند.
- همانطور که عرض را تنظیم میکنید، بررسی کنید که آیا همه عناصر در اندازههای مختلف به درستی نمایش داده میشوند یا خیر. اگر چیزی نامناسب به نظر میرسد، ممکن است لازم باشد CSS یا طرحبندی خود را تغییر دهید.
ابزارهای توسعهدهنده مایکروسافت اج (Edge DevTools)
از آنجایی که مایکروسافت اج مبتنی بر کرومیوم است، ابزارهای توسعه (DevTools) آن مشابه گوگل کروم عمل میکنند. فرآیند تنظیم عرض وبسایت تقریباً یکسان است:
- مایکروسافت اج را باز کنید و وبسایت را بارگذاری کنید.
- کلید F12 را فشار دهید یا در هر جایی از صفحه کلیک راست کرده و گزینه Inspect را انتخاب کنید.
- روی Toggle device emulation کلیک کنید، یا از میانبر Ctrl + Shift + M (ویندوز/لینوکس) یا Cmd + Shift + M (مک) استفاده کنید.
- اکنون میتوانید عرض را به صورت زیر تنظیم کنید:
- روی منوی کشویی در بالا کلیک کنید و دستگاههای الکترونیکی از پیش تعیین شده را انتخاب کنید (از نوار ابزار بالا قسمت چپ).
- مقدار عرض دلخواه را در فیلد ورودی وارد کنید (از نوار ابزار بالا قسمت چپ).
- لبه سمت راست صفحه را بکشید تا عرض به صورت دستی افزایش یا کاهش یابد.
- نقاط شکست ارائه شده توسط Edge را انتخاب کنید (از نوار ابزار باز شده بالا).
- پس از تغییر اندازه، ظاهر وبسایت خود را بررسی کنید و مطمئن شوید که همه چیز از نظر بصری متعادل باقی مانده است. در صورت بروز هرگونه مشکل، اصلاحات لازم را انجام دهید.
تنظیم عرض وبسایت در مرورگر به صورت دستی
اگر نمیخواهید از DevTools استفاده کنید، میتوانید با کشیدن لبههای پنجره مرورگر، اندازه آن را به صورت دستی تغییر دهید. اگرچه این روش ساده است، اما مانند DevTools اندازهگیریهای دقیقی از پیکسل ارائه نمیدهد. با این وجود، برای بررسی سریع نحوه رفتار وبسایت شما در اندازههای مختلف میتواند مفید باشد.
نتیجهگیری
تنظیم عرض وبسایت با استفاده از ابزارهای توسعهدهنده مرورگر برای توسعهدهندگان و طراحان وب ضروری است. چه در حال آزمایش واکنشگرایی، اشکالزدایی مشکلات طرحبندی یا بهینهسازی برای دستگاههای تلفن همراه باشید، DevTools این فرآیند را ساده میکند. با دنبال کردن مراحل مربوط به Chrome یا Firefox یا Edge، میتوانید به سرعت عرض را تغییر داده و نحوه سازگاری وبسایت خود با اندازههای مختلف صفحه نمایش را تجزیه و تحلیل کنید.
دیدگاهتان را بنویسید