Các công ty thiết kế web có thể yên tâm với phiên bản iphone x

Thiết kế mới của iphone X

Một trong những việc mất thời gian nhất của các công ty thiết web hay cụ thể hơn là những designer – người thiết kế web đó là làm sao cho website hiển thị tương thích trên mọi thiết bị di động thông minh có kết nối internet.

Chúng ta đã có kĩ thuật responsive – thiết kế web tương thích thiết bị di động trong những năm gần đây.

Trong khi việc tối ưu tốc độ cho web di động đang còn làm đau đầu nhiều công ty thiết kế thì gần đây với việc ra đời phiên bản iPhone X với thiết kế màn hình khác biệt, hãng di động Apple dường như tạo thêm thách thức cho các designer.

Thiết kế mới của iphone X

Thiết kế mới của iphone X gây khó khăn cho thiết kế web

Trong phiên bản Iphone X có một cái rãnh ở phía trên cùng của máy, đây là nơi chứa cảm biến Face ID và camera trước – nhưng cũng là trung tâm của nguồn rắc rối.

Các công ty thiết kế web sẽ phải mất thêm công sức để sữa lỗi cho giao diện web tương thích với màn hình kiểu này.

Vấn đề phát sinh khi quay ngang màn hình, giao diện web sẽ bị phần rãnh này che khuất.

Trước khi Apple đưa ra giải pháp thì các công ty thiết kế website đã linh động đưa ra các giải pháp như:

  • Điều chỉnh giao diện tự động lùi vào một chút để tránh caí rãnh.
  • Hoặc tận dụng phần rãnh để biến nó thành một phần của giao diện, nơi cất giấu các thanh menu.

Nhưng cuối cùng thì Apple cũng đã chính thức đưa ra giải pháp giúp các công ty thiết kế web có thể dễ dàng thiết kế website tương thích với iphone X của họ.

Mới đây Apple đã đưa ra công cụ WEbkit, giúp bổ sung các đoạn code và kĩ thuật để đảm bảo cho giao diện web không bị ảnh hưởng bởi cái rãnh này.

thiết kế web cho iphone x

Apple đưa ra giải pháp cho các công ty thiết kế web

Với sự hỗ trợ của Apple, các công ty thiết kế, các web designer có thể tận dụng khoảng trống 2 bên màn hình của Iphone X, mà không làm nội dụng chính bị che bởi cái rãnh.

giai-phap-thiet-ke-web-cho-iphone-x-cua-apple

Khu vực an toàn giúp nội dung hiển thị đầy dủ – khi chưa phóng to

Apple sẽ chỉ định 1 khu vực an toàn nơi mà nội dung hiển thị không bị ảnh hưởng bởi cái rãnh hay các thanh điều hướng phía dưới màn hình.

giai-phap-thiet-ke-web-cho-iphone-x-cua-apple-1

Giao diện phóng to toàn màn hình khi chưa tùy chỉnh

Trong khu vực an toàn, nội dung được hiển thị đầy đủ, có khoảng trống giữa nội dung và đường viền của màn hình. Nhưng nếu muốn phóng to để tận dụng khoảng trống thì nội dung vẫn hiển thị hài hòa.

giai-phap-thiet-ke-web-cho-iphone-x-cua-apple-2

giao diện phóng to toàn màn hình được chỉnh sửa

Như vậy, các công ty thiết kế web và công ty phát triển ứng dụng sẽ không còn quá vất vả mà chỉ cần tốt thêm chút thời gian để sử dụng Webkit của Apple làm cho giao diện website tương thích với màn hình iPhone x.

Đây có thể nói là tin vui cho các web designer vì họ không phải mất quá nhiều thời gian như trước nữa.

Leave a Reply

Your email address will not be published. Required fields are marked *