شبیه سازی دستگاه های تلفن همراه با حالت دستگاه

Kayce Basques

Sofia Emelianova

از حالت دستگاه برای تخمین تقریبی نحوه نمایش و عملکرد صفحه خود در دستگاه تلفن همراه استفاده کنید.

نمای کلی

حالت دستگاه (Device mode) نام مجموعه‌ای از ویژگی‌ها در Chrome DevTools است که به شما در شبیه‌سازی دستگاه‌های تلفن همراه کمک می‌کند. این ویژگی‌ها عبارتند از:

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

محدودیت‌ها

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

برخی از جنبه‌های دستگاه‌های تلفن همراه وجود دارند که DevTools هرگز قادر به شبیه‌سازی آنها نخواهد بود. به عنوان مثال، معماری پردازنده‌های تلفن همراه با معماری پردازنده‌های لپ‌تاپ یا دسکتاپ بسیار متفاوت است. در صورت شک، بهترین راه حل این است که صفحه خود را روی یک دستگاه تلفن همراه اجرا کنید. از Remote Debugging برای مشاهده، تغییر، اشکال‌زدایی و نمایه‌سازی کد یک صفحه از لپ‌تاپ یا دسکتاپ خود در حالی که واقعاً روی یک دستگاه تلفن همراه اجرا می‌شود، استفاده کنید.

نوار ابزار دستگاه را باز کنید

برای باز کردن نوار ابزار دستگاه، مراحل زیر را دنبال کنید:

1. ابزار توسعه (DevTools) را باز کنید .
2. روی دستگاه‌ها کلیک کنید. نوار ابزار دستگاه را که در نوار اقدام در بالا قرار دارد، تغییر وضعیت دهید .

شبیه سازی نمای موبایل

به طور پیش‌فرض، نوار ابزار دستگاه در نمای دید با ابعاد تنظیم شده روی واکنش‌گرا (Responsive) باز می‌شود. با استفاده از منوی کشویی ابعاد (Dimensions )، می‌توانید ابعاد یک دستگاه تلفن همراه خاص را شبیه‌سازی کنید .

حالت نمای واکنش‌گرا

برای تغییر اندازه‌ی پنجره‌ی نمایش به هر ابعادی که نیاز دارید، دستگیره‌ها را بکشید. یا مقادیر خاصی را در کادرهای عرض و ارتفاع وارد کنید. در این مثال، عرض روی 480 و ارتفاع روی 415 تنظیم شده است.

روش دیگر، استفاده از نوار تنظیمات پیش‌فرض عرض برای تنظیم عرض با یک کلیک روی یکی از موارد زیر است:

نمایش کوئری‌های رسانه‌ای

برای نمایش نقاط توقف پرس‌وجوی رسانه در بالای نمای دید خود، کلیک کنید گزینه‌های بیشتر > نمایش کوئری‌های رسانه‌ای .

DevTools اکنون دو نوار اضافی بالای viewport نمایش می‌دهد:

• نوار آبی با نقاط شکست max-width .
• نوار نارنجی با نقاط شکست min-width .

برای تغییر عرض نمای دید، بین نقاط توقف کلیک کنید تا نقطه توقف فعال شود.

برای یافتن اعلان @media مربوطه، بین نقاط توقف کلیک راست کرده و گزینه Reveal in source code را انتخاب کنید. DevTools پنل Sources را در خط مربوطه در ویرایشگر باز می‌کند.

تنظیم نسبت پیکسل دستگاه

نسبت پیکسل دستگاه (DPR) نسبت بین پیکسل‌های فیزیکی روی صفحه نمایش سخت‌افزاری و پیکسل‌های منطقی (CSS) است. به عبارت دیگر، DPR به کروم می‌گوید که از چند پیکسل صفحه نمایش برای ترسیم یک پیکسل CSS استفاده کند. کروم هنگام ترسیم روی نمایشگرهای HiDPI (نقاط زیاد در هر اینچ) از مقدار DPR استفاده می‌کند.

برای تنظیم مقدار DPR:

1. روی گزینه‌های بیشتر کلیک کنید > نسبت پیکسل دستگاه را اضافه کنید .

   

2. در نوار عملیات بالای پنجره نمایش، مقدار DPR را از منوی کشویی جدید DPR انتخاب کنید.

   

نوع دستگاه را تنظیم کنید

از لیست نوع دستگاه برای شبیه‌سازی دستگاه تلفن همراه یا دستگاه رومیزی استفاده کنید.

اگر نمی‌توانید لیست را در نوار اقدام بالا ببینید، گزینه‌های بیشتر را انتخاب کنید. > نوع دستگاه را اضافه کنید .

جدول بعدی تفاوت‌های بین گزینه‌ها را شرح می‌دهد. روش رندرینگ به این اشاره دارد که آیا کروم صفحه را به عنوان نمای موبایل یا دسکتاپ رندر می‌کند. آیکون مکان‌نما به نوع مکان‌نمایی اشاره دارد که هنگام حرکت ماوس روی صفحه می‌بینید. رویدادهای فعال‌شده به این اشاره دارد که آیا صفحه هنگام تعامل با صفحه، رویدادهای touch یا click فعال می‌کند یا خیر.

حالت خاص دستگاه

برای شبیه‌سازی ابعاد یک دستگاه تلفن همراه خاص، دستگاه را از لیست ابعاد انتخاب کنید.

برای اطلاعات بیشتر، به افزودن یک دستگاه تلفن همراه سفارشی مراجعه کنید.

چرخش نمای دید به حالت افقی

برای چرخاندن نمای دید به حالت افقی، روی گزینه‌ی چرخش صفحه (screen_rotation Rotate) کلیک کنید.

توجه داشته باشید که چرخش اگر نوار ابزار دستگاه شما باریک باشد، دکمه ناپدید می‌شود.

همچنین به تنظیم جهت‌گیری مراجعه کنید.

حالت دو صفحه‌ای را تغییر دهید

بعضی از دستگاه‌ها، مثلاً Surface Duo، دو صفحه نمایش دارند و دو روش برای استفاده از آنها: فعال بودن یک یا هر دو صفحه نمایش.

برای تغییر حالت بین دو صفحه نمایش و تک صفحه نمایش، روی devices_fold Toggle dual-screen mode در نوار ابزار کلیک کنید.

تنظیم وضعیت دستگاه

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

برای تنظیم وضعیت دستگاه، از منوی کشویی مربوطه در نوار ابزار، گزینه Continuous یا Folded را انتخاب کنید.

نمایش قاب دستگاه

هنگام شبیه‌سازی ابعاد یک دستگاه تلفن همراه خاص مانند Nest Hub، گزینه‌های بیشتر را انتخاب کنید. برای نمایش قاب فیزیکی دستگاه در اطراف نمای دید، از گزینه Show device frame استفاده کنید .

در این مثال، DevTools فریم مربوط به Nest Hub را نشان می‌دهد.

یک دستگاه تلفن همراه سفارشی اضافه کنید

برای افزودن یک دستگاه سفارشی:

1. روی فهرست دستگاه‌ها کلیک کنید و سپس ویرایش را انتخاب کنید.

   

2. در تنظیمات > تب دستگاه‌ها ، یا دستگاهی را از لیست دستگاه‌های پشتیبانی‌شده انتخاب کنید یا برای افزودن دستگاه دلخواه خود ، روی «افزودن دستگاه سفارشی» کلیک کنید.

3. اگر دستگاه خودتان را اضافه می‌کنید، نام، عرض و ارتفاع دستگاه را وارد کنید، سپس روی افزودن کلیک کنید.

   

   فیلدهای نسبت پیکسل دستگاه ، رشته عامل کاربر و نوع دستگاه اختیاری هستند. فیلد نوع دستگاه، لیستی است که به طور پیش‌فرض روی موبایل تنظیم شده است.

4. به پنجره نمایش برگردید، دستگاه تازه اضافه شده را از لیست ابعاد انتخاب کنید.

نمایش خط‌کش‌ها

روی گزینه‌های بیشتر کلیک کنید > برای دیدن خط‌کش‌ها ، خط‌کش‌ها را نمایش دهید . واحد اندازه‌گیری خط‌کش‌ها پیکسل است.

DevTools خط‌کش‌ها را در بالا و سمت چپ نمای دید نشان می‌دهد.

برای تنظیم عرض و ارتفاع نمای دید، روی خط‌کش‌ها در نقاط مشخص‌شده کلیک کنید.

بزرگنمایی نمای دید

برای بزرگنمایی یا کوچکنمایی از فهرست بزرگنمایی استفاده کنید.

گرفتن اسکرین شات

برای گرفتن اسکرین‌شات از آنچه در نمای دید می‌بینید، کلیک کنید گزینه‌های بیشتر > گرفتن اسکرین‌شات .

برای گرفتن اسکرین‌شات از کل صفحه، شامل محتوایی که در نمای دید قابل مشاهده نیست، از همان منو، گزینه‌ی «گرفتن اسکرین‌شات با اندازه‌ی کامل» را انتخاب کنید.

برای گنجاندن فریم دستگاه هنگام گرفتن اسکرین‌شات در حالت مخصوص دستگاه ، ابتدا گزینه‌ی «نمایش فریم دستگاه» را انتخاب کنید و سپس طبق دستورالعمل قبلی روی «گرفتن اسکرین‌شات» کلیک کنید.

برای یادگیری روش‌های دیگر گرفتن اسکرین‌شات با DevTools، به ۴ روش گرفتن اسکرین‌شات با DevTools مراجعه کنید.

شبکه و پردازنده را کنترل کنید

برای محدود کردن همزمان شبکه و پردازنده، از فهرست Throttle، گزینه Mid-tier mobile یا Low-end mobile را انتخاب کنید.

گوشی‌های میان‌رده، شبکه‌ی پرسرعت ۳G را شبیه‌سازی می‌کنند و سرعت پردازنده را تا ۴ برابر کاهش می‌دهند. گوشی‌های رده‌پایین، شبکه‌ی پرسرعت ۳G را شبیه‌سازی می‌کنند و سرعت پردازنده را تا ۶ برابر کاهش می‌دهند. به خاطر داشته باشید که این کاهش سرعت، متناسب با توانایی عادی لپ‌تاپ یا کامپیوتر رومیزی شماست.

توجه داشته باشید که اگر نوار ابزار دستگاه شما باریک باشد، فهرست Throttle پنهان خواهد شد.

فقط CPU را کنترل کنید

برای محدود کردن فقط CPU و نه شبکه، به پنل Performance بروید، روی Capture Settings کلیک کنید. و سپس از لیست CPU، یکی از گزینه‌های ۴x slowdown ، ۶x slowdown یا ۲۰x slowdown را انتخاب کنید.

فقط شبکه را محدود کنید

برای اینکه فقط شبکه و نه پردازنده را محدود کنید، به پنل شبکه بروید و از فهرست Throttle، گزینه Fast 3G یا Slow 3G را انتخاب کنید.

یا برای باز کردن منوی فرمان (Command Menu) کلیدهای Command+Shift+P (مک) یا Control+Shift+P (ویندوز، لینوکس، ChromeOS) را فشار دهید، 3G را تایپ کنید و گزینه Enable fast 3G throttling یا Enable slow 3G throttling را انتخاب کنید.

همچنین می‌توانید از پنل Performance، تنظیمات شبکه را تنظیم کنید. روی Capture Settings کلیک کنید. و سپس از لیست شبکه، Fast 3G یا Slow 3G را انتخاب کنید.

حسگرهای شبیه‌سازی‌شده

از پنل حسگرها برای لغو موقعیت جغرافیایی، شبیه‌سازی جهت دستگاه، لمس اجباری و شبیه‌سازی حالت آماده به کار استفاده کنید.

بخش‌های بعدی نگاهی سریع به نحوه لغو موقعیت جغرافیایی و تنظیم جهت دستگاه ارائه می‌دهند. برای فهرست کامل ویژگی‌ها، به شبیه‌سازی حسگرهای دستگاه مراجعه کنید.

نادیده گرفتن موقعیت جغرافیایی

برای باز کردن رابط کاربریِ تغییر دهنده‌ی موقعیت جغرافیایی، روی «سفارشی‌سازی» کلیک کنید و «ابزارهای توسعه» را کنترل کنید. و سپس ابزارهای بیشتر > حسگرها را انتخاب کنید.

یا کلیدهای Command+Shift+P (مک) یا Control+Shift+P (ویندوز، لینوکس، کروم او اس) را فشار دهید تا منوی Command باز شود، عبارت Sensors را تایپ کنید و سپس Show Sensors را انتخاب کنید.

یکی از گزینه‌های از پیش تعیین‌شده را از فهرست موقعیت مکانی انتخاب کنید، یا برای وارد کردن مختصات خودتان، گزینه «سایر...» را انتخاب کنید، یا برای آزمایش نحوه رفتار صفحه خود در هنگام بروز خطا در موقعیت مکانی، گزینه «موقعیت مکانی در دسترس نیست » را انتخاب کنید.

جهت گیری را تنظیم کنید

برای باز کردن رابط کاربری جهت‌یابی، روی سفارشی‌سازی و کنترل DevTools کلیک کنید. و سپس ابزارهای بیشتر > حسگرها را انتخاب کنید.

یا کلیدهای Command+Shift+P (مک) یا Control+Shift+P (ویندوز، لینوکس، کروم او اس) را فشار دهید تا منوی Command باز شود، عبارت Sensors را تایپ کنید و سپس Show Sensors را انتخاب کنید.

یکی از گزینه‌های از پیش تنظیم‌شده را از لیست Orientation انتخاب کنید یا برای تنظیم مقادیر آلفا، بتا و گامای خودتان ، Custom orientation را انتخاب کنید.