در ماه نوامبر، با انتشار Chrome 108، کروم تغییراتی را در نحوه عملکرد Layout Viewport هنگام نمایش صفحه‌کلید روی صفحه (OSK) اعمال می‌کند. با این تغییر، کروم در اندروید دیگر اندازه Layout Viewport را تغییر نمی‌دهد و در عوض فقط اندازه Visual Viewport را تغییر می‌دهد. این کار کروم را در اندروید با رفتار کروم در iOS و سافاری در iOS برابر می کند.
در اینجا پیش‌زمینه‌ای در مورد آنچه اتفاق می‌افتد، چرا Chrome این تغییر را انجام می‌دهد و برای آماده‌سازی چه کارهایی می‌توانید انجام دهید، آمده است.
Layout Viewport و Visual Viewport
هنگامی که از یک وب سایت بازدید می کنید، پس از بارگیری کل محتوای صفحه، نمی توانید آن را ببینید. در عوض، مرورگر به شما یک viewport ارائه می دهد که از طریق آن می توانید بخشی از صفحه را ببینید. این درگاه دید با نام Layout Viewport نیز شناخته می شود. هنگامی که محتوای یک صفحه بیش از حد بزرگ می شود، مرورگر مکانیزم اسکرول را ارائه می دهد.
هنگامی که عناصر را با استفاده از position: fixed قرار می‌دهید، این عناصر در مقابل آن Layout Viewport قرار می‌گیرند. همانطور که با اسکرول کردن صفحه به پایین، Layout Viewport در جای خود باقی می ماند، عناصری که از position: fixed خواهند بود.
position: fixed (جعبه های آبی) . سافاری (از چپ به راست) در آیفون، کروم در اندروید و فایرفاکس در اندروید نشان داده شده است.علاوه بر این Layout Viewport، مرورگر یک Visual Viewport نیز ارائه می دهد. نشان دهنده بخشی از viewport است که در حال حاضر قابل مشاهده است. در سطح زوم 1، این ویژوال ویژوال به اندازه نمای درگاه طرح بندی بزرگ است.
وقتی کوچک‌نمایی می‌کنید، اندازه Visual Viewport را نسبت به Layout Viewport کوچک می‌کنید.
رفتار تغییر اندازه Viewport
هنگام فوکوس کردن یک ورودی یا هر ناحیه قابل ویرایش دیگری، دستگاه‌ها - عمدتاً دستگاه‌های صفحه لمسی - می‌توانند صفحه‌کلید روی صفحه را نشان دهند. این صفحه کلید، که اغلب به عنوان صفحه کلید مجازی شناخته می شود، به کاربران اجازه می دهد تا محتوا را در قسمت قابل ویرایش وارد کنند.
هنگام انجام این کار، مرورگرها به یکی از روش های زیر در رابطه با پورت های دید مختلف پاسخ می دهند:
- فقط Visual Viewport را تغییر اندازه دهید و Layout Viewport را جبران کنید.
- اندازه هر دو Visual Viewport و Layout Viewport را تغییر دهید.
- اندازه هیچ یک از Layout Viewport یا Visual Viewport را تغییر ندهید و صفحه کلید مجازی را در بالای هر دو قرار دهید.
این سه رفتار به صورت زیر تجسم می شوند:
بسته به اینکه بازدیدکننده از کدام ترکیب مرورگر و سیستم عامل استفاده می کند، یکی از رفتارها خارج از کنترل شما استفاده می شود.
نگاشت رفتارهای مختلف تغییر اندازه
در تلاش بررسی Viewport - بخشی از Interop 2022 - جنبه های مختلف مربوط به viewport برای هر مرورگر اصلی و ترکیب سیستم عامل مورد بررسی قرار گرفت.
یکی از جنبه های آزمایش شده، رفتار تغییر اندازه در هنگام نمایش OSK است. این منجر به طبقه بندی زیر شد:
گروه یک
مرورگرهایی که اندازه Visual Viewport را تغییر می دهند و Layout Viewport را دست نخورده می گذارند.
- سافاری در iOS
- سافاری در iPadOS
- Chrome در سیستم عامل Chrome
- کروم در iOS
- Chrome در iPadOS
- Edge در iOS
- Edge در iPadOS
گروه دو
مرورگرهایی که اندازه هر دو Visual Viewport و Layout Viewport را تغییر می دهند.
- کروم در اندروید
- فایرفاکس در اندروید
- اج در اندروید
- فایرفاکس در iOS
گروه سه
مرورگرهایی که اندازه هیچ یک از viewport ها را تغییر نمی دهند:
- هیچکدام به طور پیش‌فرض - در Chrome در Android می‌توانید با استفاده از VirtualKeyboard API این رفتار را انتخاب کنید.
عوارض جانبی هر رفتار
این تفاوت در نحوه تغییر اندازه درگاه‌های مشاهده مختلف هنگام نمایش OSK منجر به یک طرح‌بندی و رفتار اندازه وب‌سایت‌ها غیرقابل تعامل می‌شود.
در مرورگرهای گروه 1 ، با OSK نشان داده شده است:
- مقادیر محاسبه شده برای واحدهای مربوط به viewport یکسان باقی می مانند.
- عناصری که برای اشغال فضای بصری کامل طراحی شده اند اندازه خود را حفظ می کنند.
- عناصری که از
position: fixedاستفاده می کنند در جای خود باقی می مانند و می توانند توسط OSK پنهان شوند.
در مرورگرهای گروه 2 ، با OSK نشان داده شده است:
- مقادیر محاسبه شده برای واحدهای مربوط به viewport کوچک می شوند.
- عناصری که برای اشغال کامل فضای بصری طراحی شده بودند، کوچک می شوند.
- عناصری که از
position: fixedاستفاده می کنند می توانند در جای دیگری از طرح بندی به پایان برسند.
position: fixed (جعبه های آبی) . Safari در iOS (چپ) و Chrome در Android (مرکز و راست) نشان داده شده است.تا زمانی که به استفاده از User-Agent sniffing متوسل نشوید یا به اسکریپت نویسی گسترده تکیه نکنید، نمی توانید بدانید که کدام رفتار استفاده شده است. شما همچنین نمی توانید رفتار را تغییر دهید، زیرا توسط مرورگر و ترکیب سیستم عاملی که کاربر از آن بازدید می کند تعیین می شود.
تغییر رفتار پیش‌فرض در Chrome 108
از Chrome 108، Chrome در Android رفتار تغییر اندازه درگاه دید خود را طوری تنظیم می‌کند که وقتی صفحه‌کلید روی صفحه نمایش داده می‌شود، دیگر اندازه نمای Layout را تغییر نمی‌دهد.
با این کار رفتار Chrome در Android با کروم در iOS، iPadOS، Windows، و CrOS، Safari در iOS و iPadOS، و Edge در iOS، iPadOS و Windows هماهنگ می‌شود.
به لطف این تغییر، نویسندگان می توانند بدون توجه به سیستم عامل کروم که روی کدام سیستم عامل اجرا می شود، بدانند که از کدام رفتار استفاده می شود. علاوه بر این، واحدهای مرتبط با نمای درگاه پایدار را امکان پذیر می کند: نشان دادن یا پنهان کردن OSK بر این واحدها تأثیر نمی گذارد.
انتخاب رفتار متفاوت
اگر می خواهید وب سایت شما از رفتار تغییر اندازه قبل از 108 استفاده کند، نترسید. همچنین ارسال در Chrome 108 افزونه‌ای برای متا تگ viewport است.
از طریق کلید interactive-widget ، می‌توانید به Chrome بگویید کدام رفتار تغییر اندازه را می‌خواهید.
مقادیر پذیرفته شده برای interactive-widget عبارتند از:
-
resizes-visual: فقط Visual Viewport را تغییر اندازه دهید اما Layout Viewport را تغییر دهید. -
resizes-content: اندازه هر دو Visual Viewport و Layout Viewport را تغییر دهید. -
overlays-content: اندازه هیچ یک از درگاه های دید را تغییر ندهید.
برای انتخاب مجدد به رفتار «قدیمی» Chrome در Android، متا تگ viewport را روی این تنظیم کنید:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
اگر interactive-widget در متا تگ viewport قرار ندهید، Chrome از رفتار پیش‌فرض استفاده می‌کند که resizes-visual است.
به صورت تجسمی، تنظیمات این تأثیر را بر روی درگاه‌های دید مختلف دارند:
resizes-visual ، resizes-content و overlays-content .می توانید تأثیر هر مقدار را در مرورگر خود در این وب سایت آزمایشی امتحان کنید.
تست و بازخورد
ما انتظار داریم که برخی از تفاوت‌های جزئی با سایت‌های موجود وجود داشته باشد، اما انتظار داریم که این موارد غیرانسدادی باشند زیرا کروم 108 در اندروید اکنون مشابه سافاری در iOS رفتار می‌کند. بنابراین، وب‌سایت‌هایی که روی سافاری در iOS به خوبی کار می‌کنند باید روی Chrome 108 در اندروید نیز به خوبی کار کنند.
با این حال، ما نویسندگان وب‌سایت را تشویق می‌کنیم تا به‌طور فعال وب‌سایت‌های خود را در Chrome 108، که از 27 اکتبر 2022 در نسخه بتا است، آزمایش کنند. به طور خاص مراقب عناصری باشید که از position: fixed و/یا تکیه بر واحدهای مربوط به Viewport .
بازخورد را می توان در crbug.com گزارش کرد. مطمئن شوید که "صفحه کلید روی صفحه" را در عنوان گزارش وارد کنید.