نمایشگر بیرونی آیفون دوو ۳۸۲ × ۵۷۸ پیکسل CSS با تراکم پیکسل ۳ است. در اولین بررسی با دستگاه واقعی متوجه شدیم: وب‌سایت نمایشگر را پر نمی‌کرد. در سمت راست، نوار رنگی در کنار محتوا می‌گذشت که با رنگ پس‌زمینه صفحه پر می‌شد، و در چپ یک حاشیه تیره باقی می‌ماند. نمایشگر کوچک است و هر حاشیه، سطحی است که هدر رفته است.
علت، خطای CSS خود ما نیست. سافاری ناحیه نمایش سمت راست دوو، جایی که دوربین قرار دارد، را به‌عنوان ناحیه ممنوعه در نظر می‌گیرد. با چیدمان در عرض دستگاه، یعنی ۳۸۲ پیکسل، صفحه اجازه ندارد آنجا نقاشی کند. نوار سمت راست دقیقاً همین ناحیه ممنوعه است. این رفتار را در وب‌سایت‌های دیگر هم بررسی کردیم و همان را دیدیم. رفتار سافاری است، نه خطای صفحه.
علاوه بر آن، نوار آدرس بخشی از رنگ پرده سایت ما را برمی‌داشت. این هم سافاری ۲۶ است: مرورگر رنگ‌ها را از صفحه نمونه‌برداری می‌کند و روی نوارها می‌گذارد. این دو با هم، فضای بیشتری از نمایشگر کوچک را گرفتند.
چرا ترفند viewport لازم است
راه رسیدن به نمایش کامل، از یک تخطی آگاهانه از قاعده رایج می‌گذرد. به‌جای متاتگ با عرض دستگاه، عرض چیدمان ثابت ۴۶۰ پیکسل می‌گذاریم:
<meta name="viewport" content="width=460, initial-scale=1, viewport-fit=cover">
سافاری صفحه را با عرض ۴۶۰ پیکسل رندر می‌کند و روی میدان دید ۳۸۲ پیکسلی کوچک می‌کند. این کوچک‌سازی بخشی از طراحی است: چون چیدمان از میدان دید پهن‌تر است، صفحه زیر ناحیه ممنوعه لبه راست هم نقاشی می‌کند. نمایشگر کامل پر می‌شود.
این حالت را نمی‌توان با جاوااسکریپت تحمیل کرد. شیء visualViewport یک رابط فقط-خواندنی است؛ مقادیر مقیاس فقط برای خواندن در دسترس‌اند. اگر زوم می‌خواهید، باید آن را با متاتگ اعلام کنید.
ساختار اصلاح
متاتگ ثابت viewport به‌تنهایی کافی نیست. یک پیامد دوم می‌سازد که باقی بازسازی با آن روبرو می‌شود: عرض چیدمان ۴۶۰ و میدان دید ۳۸۲ برابر ۷۸ پیکسل تفاوت دارند. این ۷۸ پیکسل یک فضای جابه‌جایی است. بدون اقدام مقابله‌ای، صفحه با انگشت به چپ و راست می‌رود و هرچه آنجاست قابل لمس نیست. چهار محور کاری را مستند کردیم:
- نوارهای تمام‌صفحه: نوارهایی که با واحدهای viewport کار می‌کنند باید به عرض چیدمان تراز شوند. در دوو، سافاری این واحدها را متفاوت از کانتینر اطراف حل می‌کند. به همین دلیل عرض چیدمان را با جاوااسکریپت در یک متغیر CSS می‌نویسیم و همه نوارها را به آن تبدیل می‌کنیم. اندازه‌گیری روی دستگاه: پیش از تغییر، نوار پرده روی ۳۸۲ پیکسل می‌رفت در حالی که بخش با ۴۶۰ چیده می‌شد. پس از تغییر، از چیدمان پیروی می‌کند.
- نوار آدرس: سافاری ۲۶ از عناصر تمام‌صفحه ثابت رنگ نمونه‌برداری می‌کند و روی نوارها می‌گذارد. تا وقتی یک عنصر مات به لبه چسبیده باشد، نوار می‌ماند، با هر رنگی. دو چنین عنصری داشتیم: یک لایه ساختاری و یک بوم جلوه. هر دو اکنون به‌جای ثابت، مقید به بخش‌اند. پس از آن نوار دوباره جمع شد.
- دیالوگ‌ها و منوها: همه دیالوگ‌ها، منوها و لایت‌باکس‌ها اکنون عرض خود را به میدان دید می‌سنجند، نه به عرض چیدمان، و روی میدان دید تراز می‌شوند. پیش از این، نیمی از دیالوگ به فضای جابه‌جایی می‌رسید؛ آنجا رویداد لمسی نمی‌رسد. آیتم‌های منو و کنترل‌های لایت‌باکس بی‌آنکه هیچ آزمونی گزارش دهد، بی‌پاسخ شده بودند.
- جابه‌جایی جانبی: لایه‌هایی که در فضای جابه‌جایی نقاشی می‌کنند، حس قابل‌جابه‌جایی بودن صفحه می‌سازند. بوم جلوه باران طلا مقید به بخش است و به عرض میدان دید قفل شده.
یک ویژگی سافاری را آگاهانه پذیرفتیم: مراحل فوکوس بومی دیالوگ هنگام باز شدن، ابتدای صفحه را به فضای جابه‌جایی اسکرول می‌کند. باز کردن دیالوگ‌ها با روش مدال را رها کردیم و به‌عنوان لایه معمولی با قفل اسکرول خودش باز می‌کنیم؛ این هم بخشی از اصلاح است.
چرا این موضوع کوچک نیست
پنج روز روی این نمایشگر نشستیم. نه چون اصلاح طولانی بود، بلکه چون دام‌ها پنهان‌اند. آزمون‌های مرورگر بدون رابط کاربری سبز می‌مانند، چون کرومیوم واحدهای viewport را نسبت به عرض چیدمان حل می‌کند و فضای جابه‌جایی را نمی‌شناسد. خطاهایی که فقط روی دستگاه رخ می‌دهند، آنجا دیده نمی‌شوند. هر اصلاح را ابتدا روی یک دوو واقعی بررسی کردیم.
و دلیلی هست که به نمایشگر بیرونی اهمیت بدهیم: خودمان هم یک دوو داریم و در روزمره بیشترِ وقت بسته نگهش می‌داریم. نمایشگر بیرونی بنابراین اغلب نخستین تماس با یک وب‌سایت است. هر که آنجا حاشیه نشان دهد، نخستین تأثیر را از دست می‌دهد.
الگوهای خطا کدام‌اند
این الگوهای خطا را مستند و رفع کردیم:
- نوار سمت راست: سافاری ناحیه نمایش راست را برای محتوای صفحه مسدود می‌کند. اصلاح: متاتگ viewport با عرض چیدمان ثابت ۴۶۰؛ صفحه هنگام کوچک‌سازی زیر ناحیه ممنوعه نقاشی می‌کند.
- جابه‌جایی صفحه به پهلو: عرض چیدمان بزرگ‌تر از میدان دید، فضای جابه‌جایی می‌سازد. اصلاح: هیچ محتوایی در نوار مرده نه؛ دیالوگ‌ها و جلوه‌ها به عرض میدان دید قفل.
- منوی غیرقابل لمس: دیالوگ روی viewport چیدمان وسط‌چین می‌شود و به فضای جابه‌جایی می‌رسد. آنجا رویداد لمسی نمی‌رسد. اصلاح: قفل‌کردن دیالوگ به میدان دید.
- تغییر رنگ نوار آدرس: سافاری ۲۶ از عناصر تمام‌صفحه ثابت در لبه‌ها رنگ نمونه‌برداری می‌کند. اصلاح: هیچ عنصر تمام‌صفحه ثابت ماتی در لبه‌ها.
پرسش‌های رایج درباره نمایشگر بیرونی دوو
نمایشگر بیرونی آیفون دوو چند پیکسل CSS است؟
در حالت بسته، ۳۸۲ × ۵۷۸ پیکسل CSS با تراکم پیکسل ۳. در حالت باز، وب‌سایت از عرض ۷۶۱ پیکسل به بالا نسخه دسکتاپ را به کار می‌برد.
باید وب‌سایتم را برای ۳۸۲ پیکسل بازسازی کنم؟
نمایش موبایل می‌ماند و تکمیل می‌شود. متاتگ ثابت viewport مقیاس‌بندی را برعهده دارد و چهار محور کاری مقاله، پیامدها را می‌گیرد. اگر عنصر تمام‌صفحه ثابت و نوارهای مبتنی بر viewport ندارید، کار کمتری دارید. دووی باز از عرض ۷۶۱ پیکسل نسخه دسکتاپ را می‌گیرد، در حالت عمودی با عرض ۶۲۶ پیکسل.
چرا آزمون‌های من این خطا را نشان نمی‌دهند؟
آزمون‌های مبتنی بر کرومیوم واحدهای viewport را نسبت به عرض چیدمان حل می‌کنند و فضای جابه‌جایی میان چیدمان و میدان دید را نمی‌شناسند. خطا فقط روی دستگاه وجود دارد. اگر دوو دارید، همان‌جا بیازمایید. اگر ندارید، می‌توانید مقیاس‌بندی را با اورراید مرورگر شبیه‌سازی کنید، اما آنگاه باید حل‌شدن واحدها را جداگانه بررسی کنید.
تطبیق یک وب‌سایت موجود چقدر هزینه دارد؟
به ساختار بستگی دارد. وب‌سایت‌هایی با عناصر تمام‌صفحه کم و دیالوگ‌های وسط‌چین در یک روز تطبیق می‌یابند. وب‌سایت‌هایی با لایه‌های جلوه ثابت، سیستم دیالوگ اختصاصی و نوارهای مبتنی بر viewport دو تا سه روز با آزمون دستگاه می‌خواهند. وب‌سایت خودمان از دسته دوم است و پنج روز برد، چون باید رفتار نمایشگر را از صفر مستند می‌کردیم. آن پژوهش اکنون تمام است و چیزی سر راه تطبیق نیست.
آیفون Duo: چرا ۹:۱۶ به‌تنهایی دیگر صفحه را پر نمی‌کند
هوش مصنوعی در بازاریابی: اعداد امروز