طراحی وب ریسپانسیو از بسیاری جهات واکنشی به تلفن های همراه بود. قبل از ظهور گوشی های هوشمند، تعداد کمی از مردم به طور جدی به این فکر می کردند که وب سایت ها چگونه باید در دستگاه های دستی ظاهر و احساس شوند. این امر با افزایش چشمگیر تلفن های همراه با مرورگرهای وب داخلی تغییر کرد.
طراحی وب پاسخگو ذهنیتی را تشویق می کند که مفروضات را زیر سوال می برد. در حالی که قبلاً تصور این که یک وب سایت فقط روی رایانه رومیزی قابل مشاهده است معمول بود، اکنون طراحی همان وب سایت برای تلفن ها و تبلت ها نیز یک روش استاندارد است. در واقع، استفاده از تلفن همراه اکنون استفاده از دسکتاپ در وب را تحت الشعاع قرار داده است .
این طرز فکر پاسخگو برای آینده به شما کمک خواهد کرد. کاملاً ممکن است که وب‌سایت‌های شما در دستگاه‌ها و صفحه‌هایی مشاهده شوند که امروز حتی نمی‌توانیم تصورشان را کنیم. و این طرز فکر فراتر از صفحه نمایش گسترش می یابد. حتی در حال حاضر مردم از دستگاه‌های بدون صفحه نمایش برای دسترسی به محتوای شما استفاده می‌کنند. اگر از پایه قوی HTML معنایی استفاده می کنید، دستیارهای صوتی می توانند از وب سایت های شما استفاده کنند.
در دنیای نمایشگرها نیز آزمایش وجود دارد. امروزه دستگاه هایی با صفحه نمایش تاشو در بازار وجود دارد. که چالش هایی را برای طرح های شما معرفی می کند.
صفحه نمایش دوتایی
کاربران دستگاه‌های تاشو می‌توانند انتخاب کنند که آیا می‌خواهند مرورگر وب آنها فقط یکی از صفحه‌ها را اشغال کند یا در هر دو صفحه باشد. اگر مرورگر هر دو صفحه را باز کند، وب سایت نمایش داده شده توسط لولای بین دو صفحه از هم جدا می شود. به نظر عالی نمیاد
بخش های Viewport
یک ویژگی رسانه آزمایشی وجود دارد که برای تشخیص اینکه آیا وب سایت شما در یک دستگاه دو صفحه نمایش نمایش داده می شود طراحی شده است. نام پیشنهادی ویژگی رسانه viewport-segments است. دو نوع وجود دارد: horizontal-viewport-segments و vertical-viewport-segments .
اگر ویژگی رسانه horizontal-viewport-segments مقدار 2 و vertical-viewport-segments مقدار 1 را گزارش می دهد، به این معنی که لولای دستگاه از بالا به پایین اجرا می شود و محتوای شما را به دو پانل کنار هم تقسیم می کند.
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
// Styles for side-by-side screens.
}
اگر ویژگی رسانه vertical-viewport-segments مقدار 2 و horizontal-viewport-segments مقدار 1 را گزارش کند، لولا از یک طرف به طرف دیگر اجرا می شود و محتوای شما را به دو پانل، یکی روی دیگری تقسیم می کند.
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
// Styles for stacked screens.
}
اگر هر دو vertical-viewport-segments و horizontal-viewport-segments مقدار 1 را گزارش کنند، این بدان معناست که وب سایت فقط در یک صفحه نمایش داده می شود، حتی اگر دستگاه بیش از یک صفحه داشته باشد. این معادل استفاده نکردن از هرگونه درخواست رسانه ای است.
متغیرهای محیطی
ویژگی رسانه viewport-segments به خودی خود به شما کمک نمی کند تا پیرامون آن لولای آزاردهنده طراحی کنید. شما به راهی برای دانستن اندازه لولا نیاز دارید. اینجاست که متغیرهای محیطی می توانند کمک کنند.
متغیرهای محیطی در CSS به شما این امکان را می‌دهند که نفوذهای ناخوشایند دستگاه را در سبک‌های خود فاکتور بگیرید. برای مثال، می‌توانید با استفاده از مقادیر محیطی safe-area-inset-top , safe-area-inset-right , safe-area-inset-bottom و safe-area-inset-left اطراف "نچ" آیفون X را طراحی کنید. . این کلمات کلیدی در یک تابع env() پیچیده شده اند.
body {
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}
متغیرهای محیطی مانند ویژگی های سفارشی کار می کنند. این به این معنی است که در صورتی که متغیر محیطی وجود نداشته باشد، می‌توانید از گزینه بازگشتی عبور کنید.
body {
padding-top: env(safe-area-inset-top, 1em);
padding-right: env(safe-area-inset-right, 1em);
padding-bottom: env(safe-area-inset-bottom, 1em);
padding-left: env(safe-area-inset-left, 1em);
}
برای اینکه آن متغیرهای محیطی در iPhone X کار کنند، عنصر meta را که اطلاعات viewport را مشخص می کند، به روز کنید:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
اکنون طرح‌بندی صفحه شما کل نمای را اشغال می‌کند و به‌طور ایمن سند را با مقادیر ورودی ارائه‌شده توسط دستگاه پر می‌کند.
برای صفحه نمایش های تاشو، شش متغیر محیطی جدید پیشنهاد شده است: viewport-segment-width ، viewport-segment-height ، viewport-segment-top ، viewport-segment-left ، viewport-segment-bottom ، viewport-segment-right .
در اینجا نمونه ای از یک طرح با دو ستون، یکی پهن تر از دیگری است.
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
برای صفحات دوگانه با لولای عمودی، ستون اول را به اندازه عرض صفحه اول و ستون دوم را به اندازه عرض صفحه دوم تنظیم کنید.
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
main article {
flex: 1 1 env(viewport-segment-width 0 0);
}
main aside {
flex: 1;
}
}
صفحه نمایش دوگانه را به عنوان یک فرصت در نظر بگیرید. شاید بتوان از یک صفحه برای نمایش محتوای متنی قابل پیمایش استفاده کرد در حالی که صفحه دیگر یک عنصر ثابت مانند تصویر یا نقشه را نمایش می دهد.
آینده
آیا نمایشگرهای تاشو به چیز بزرگ بعدی تبدیل خواهند شد؟ چه کسی می داند. هیچ‌کس نمی‌توانست پیش‌بینی کند که دستگاه‌های تلفن همراه چقدر محبوب خواهند شد، بنابراین ارزش آن را دارد که در مورد عوامل شکل آینده ذهن باز داشته باشیم.
مهمتر از همه، ارزش این را دارد که اطمینان حاصل کنید که وب سایت های شما می توانند به هر چیزی که آینده ممکن است پاسخ دهند. این چیزی است که طراحی واکنش گرا به شما می دهد: نه فقط مجموعه ای از تکنیک های عملی، بلکه ذهنیتی که در ساختن وب فردا به خوبی به شما کمک خواهد کرد.
درک خود را بررسی کنید
دانش خود را در مورد تنظیمات صفحه آزمایش کنید
کدام پرسش رسانه ای یک دستگاه تاشو را در حالت افقی تقسیم شده هدف قرار می دهد؟
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1) متغیرهای محیطی چیست؟ به عنوان مثال env(safe-area-inset-top)