در ماه نوامبر، با انتشار Chrome 108، Chrome تغییراتی در نحوه رفتار «نمای چیدمان» هنگام نمایش صفحه‌کلید مجازی (OSK) ایجاد خواهد کرد. با این تغییر، Chrome در Android دیگر اندازه «نمای چیدمان» را تغییر نمی‌دهد و درعوض فقط اندازه «نمای دیداری» را تغییر می‌دهد. این کار باعث می‌شود رفتار Chrome در Android با Chrome در iOS و Safari در iOS هم‌تراز شود.
در اینجا اطلاعاتی درباره آنچه درحال رخ دادن است، دلیل ایجاد این تغییر توسط Chrome، و کارهایی که می‌توانید برای آماده شدن انجام دهید ارائه شده است.
ناحیه نمایش چیدمان و ناحیه نمایش دیداری
هنگام بازدید از وب‌سایت، پس‌از بار شدن صفحه نمی‌توانید کل محتوای صفحه را ببینید. درعوض، مرورگر یک نمای دید به شما ارائه می‌دهد که ازطریق آن می‌توانید بخشی از صفحه را ببینید. این نمای اَشکال با نام نمای اَشکال چیدمان نیز شناخته می‌شود. وقتی محتوای صفحه بیش‌ازحد بزرگ می‌شود، مرورگر سازوکار پیمایش را ارائه می‌دهد.
هنگام جای‌گذاری عناصر بااستفاده از position: fixed، این عناصر نسبت به آن «نمای چیدمان» چیده خواهند شد. ازآنجایی‌که «نمای چیدمان» با پیمایش کردن به‌پایین صفحه در جای خود باقی می‌ماند، عناصری که از position: fixed استفاده می‌کنند نیز در جای خود باقی می‌مانند.
position: fixed (جعبه‌های آبی) چیده شده‌اند. Safari در iPhone، Chrome در Android، و Firefox در Android (از چپ به راست) نشان داده شده است.
علاوه‌بر این «ناحیه نمایش چیدمان»، مرورگر ناحیه نمایش دیداری نیز ارائه می‌دهد. این نشان‌دهنده بخشی از نمای دید است که درحال‌حاضر قابل‌مشاهده است. در سطح بزرگ‌نمایی ۱، این «ناحیه نمایش دیداری» به‌اندازه «ناحیه نمایش چیدمان» است.
هنگام بزرگ‌نمایی با نیشگون، اندازه «ناحیه نمایش دیداری» را نسبت‌به «ناحیه نمایش چیدمان» کوچک می‌کنید.
رفتار تغییر اندازه ناحیه نمایش
هنگام تمرکز روی ورودی یا هر ناحیه قابل‌ویرایش دیگری، دستگاه‌ها (عمدتاً دستگاه‌های دارای صفحه لمسی) می‌توانند صفحه‌کلید مجازی را نشان دهند. این صفحه‌کلید که اغلب به آن صفحه‌کلید مجازی گفته می‌شود، به کاربران امکان می‌دهد محتوا را در ناحیه قابل‌ویرایش وارد کنند.
هنگام انجام این کار، مرورگرها به یکی از روش‌های زیر در رابطه با نماهای مختلف پاسخ می‌دهند:
- فقط اندازه «نمای دیداری» را تغییر دهید و «نمای چیدمان» را جابه‌جا کنید.
- اندازه «ناحیه نمایش دیداری» و «ناحیه نمایش چیدمان» را تغییر دهید.
- اندازه «ناحیه نمایش چیدمان» یا «ناحیه نمایش دیداری» را تغییر ندهید، صفحه‌کلید مجازی را روی هر دو قرار دهید.
این سه رفتار به‌صورت زیر تجسم می‌شوند:
بسته به اینکه بازدیدکننده از کدام ترکیب مرورگر و سیستم‌عامل استفاده می‌کند، یکی از این رفتارها استفاده می‌شود که خارج از کنترل شما است.
نگاشت رفتارهای مختلف تغییر اندازه
در تلاش برای بررسی نمای هدف-بخشی از Interop 2022-جنبه‌های مختلف مربوط به نمای هدف برای هر ترکیب اصلی مرورگر و سیستم‌عامل بررسی شد.
یکی از جنبه‌های آزمایش‌شده، رفتار تغییر اندازه هنگام نمایش صفحه‌کلید مجازی است. این امر به طبقه‌بندی زیر منجر شد:
گروه یک
مرورگرهایی که اندازه «نمای دیداری» را تغییر می‌دهند و «نمای چیدمان» را بدون تغییر باقی می‌گذارند.
- Safari در iOS
- Safari در iPadOS
- Chrome در Chrome OS
- Chrome در iOS
- Chrome در iPadOS
- Edge در iOS
- Edge در iPadOS
گروه دو
مرورگرهایی که اندازه «ناحیه نمایش دیداری» و «ناحیه نمایش چیدمان» را تغییر می‌دهند.
- Chrome در Android
- Firefox در Android
- Edge در Android
- Firefox در iOS
گروه سه
مرورگرهایی که اندازه هیچ‌کدام از درگاه‌های دید را تغییر نمی‌دهند:
- هیچ‌کدام به‌طور پیش‌فرض – در Chrome در Android می‌توانید بااستفاده از VirtualKeyboard API با این رفتار موافقت کنید
عوارض جانبی هر رفتار
این تفاوت در نحوه تغییر اندازه نماهای مختلف هنگام نمایش صفحه‌کلید مجازی منجر به رفتار غیرقابل‌تعامل در چیدمان و اندازه‌بندی وب‌سایت‌ها می‌شود.
در مرورگرهای گروه ۱، با نمایش صفحه‌کلید مجازی:
- مقادیر محاسبه‌شده برای واحدهای مرتبط با نمای هدف یکسان باقی می‌مانند.
- عناصری که برای اشغال کل فضای دیداری طراحی شده‌اند اندازه خود را حفظ می‌کنند.
- عناصری که از
position: fixedاستفاده می‌کنند در جای خود باقی می‌مانند و ممکن است توسط صفحه‌کلید مجازی پوشانده شوند.
در مرورگرهای گروه ۲، با نمایش صفحه‌کلید مجازی:
- مقادیر محاسبه‌شده برای واحدهای مرتبط با نمای هدف کاهش می‌یابد.
- عناصری که برای اشغال کل فضای دیداری طراحی شده‌اند کوچک می‌شوند.
- عناصری که از
position: fixedاستفاده می‌کنند ممکن است در جای دیگری از چیدمان قرار بگیرند.
position: fixed (چارگوش‌های آبی) استفاده می‌کنند توجه کنید. Safari در iOS (سمت راست) و Chrome در Android (وسط و چپ) نشان داده شده است.
مگر اینکه به بوکشیدن «نماینده کاربر» متوسل شوید یا به اسکریپت‌نویسی گسترده تکیه کنید، نمی‌توانید بدانید از کدام رفتار استفاده می‌شود. همچنین نمی‌توانید رفتار را تغییر دهید، زیرا این رفتار توسط ترکیب مرورگر و سیستم‌عاملی که کاربر از آن بازدید می‌کند تعیین می‌شود.
تغییر رفتار پیش‌فرض در Chrome 108
از Chrome نسخه ۱۰۸، Chrome در Android رفتار تغییر اندازه نمای هدف را به‌گونه‌ای تنظیم می‌کند که وقتی صفحه‌کلید مجازی نشان داده می‌شود، دیگر اندازه «نمای هدف چیدمان» را تغییر ندهد.
این کار رفتار Chrome در Android را با Chrome در iOS، iPadOS، Windows، و CrOS، Safari در iOS و iPadOS، و Edge در iOS، iPadOS، و Windows هم‌راستا می‌کند.
به‌لطف این تغییر، نویسندگان می‌توانند بدانند که از کدام رفتار استفاده خواهد شد، صرف‌نظر از اینکه Chrome روی کدام سیستم‌عامل اجرا می‌شود. علاوه‌براین، این ویژگی امکان استفاده از واحدهای پایدار مرتبط با نمای را فراهم می‌کند: نمایش یا پنهان کردن صفحه‌کلید مجازی بر این واحدها تأثیر نمی‌گذارد.
درحال موافقت کردن با رفتاری متفاوت
اگر می‌خواهید وب‌سایتتان از رفتار تغییر اندازه قبل‌از نسخه ۱۰۸ استفاده کند، نگران نباشید. همچنین در Chrome 108، افزونه‌ای برای متاتگ بخش قابل‌مشاهده ارائه می‌شود.
ازطریق کلید interactive-widget، می‌توانید به Chrome بگویید که کدام رفتار تغییر اندازه را می‌خواهید.
مقادیر پذیرفتنی برای interactive-widget عبارت‌اند از:
resizes-visual: فقط اندازه «ناحیه نمایش دیداری» را تغییر دهید، نه «ناحیه نمایش چیدمان».resizes-content: اندازه «ناحیه نمایش دیداری» و «ناحیه نمایش چیدمان» را تغییر دهید.overlays-content: اندازه هیچ‌کدام از نماهای هدف را تغییر ندهید.
برای بازگشت به رفتار «قدیمی» Chrome در Android، متاتگ بخش قابل‌مشاهده را روی این مقدار تنظیم کنید:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=r>esizes-content"
اگر interactive-widget را در متاتگ بخش قابل‌مشاهده اضافه نکنید، Chrome از رفتار پیش‌فرض استفاده خواهد کرد که resizes-visual است.
به‌صورت تصویری، این تنظیمات چنین تأثیری بر درگاه‌های دید مختلف دارند:
resizes-visual، resizes-content، و overlays-content.
می‌توانید تأثیر هر مقدار را در مرورگرتان در این وب‌سایت نمایشی امتحان کنید.
آزمایش و بازخورد
انتظار داریم تفاوت‌های جزئی در سایت‌های موجود ایجاد شود، اما انتظار داریم این تفاوت‌ها مسدودکننده نباشند زیرا Chrome 108 در Android اکنون مشابه Safari در iOS رفتار خواهد کرد. بنابراین، وب‌سایت‌هایی که در Safari در iOS به‌خوبی کار می‌کنند باید در Chrome 108 در Android نیز به‌خوبی کار کنند.
بااین‌حال، نویسندگان وب‌سایت را تشویق می‌کنیم وب‌سایت‌هایشان را به‌طور فعال در Chrome 108 که از ۲۷ اکتبر ۲۰۲۲ در نسخه بتا است آزمایش کنند. به‌طور خاص، به‌دنبال عناصری باشید که از position: fixed استفاده می‌کنند و/یا به واحدهای مرتبط با نمای هدف متکی هستند.
بازخورد را می‌توانید در crbug.com گزارش کنید. حتماً «صفحه‌کلید مجازی» را در عنوان گزارش بگنجانید.