xác thực google maps

Apple đưa ra giải pháp cho các nhà thiết kế web, để thích nghi với "cái rãnh" trên iPhone X

Thảo luận trong 'Hỗ trợ Lập Trình, Mã Nguồn' bắt đầu bởi Đoàn Nguyễn, 25 Tháng chín 2017.

Lượt xem: 6,097

  1. Đoàn Nguyễn

    Đoàn Nguyễn Thiết kế web Staff Member

    Bài viết:
    932
    Đã được thích:
    1,614
    Như vậy, các nhà thiết kế web và phát triển ứng dụng sẽ phải tốn thêm một chút công sức để có thể thích nghi với giao diện mới của iPhone X.

    Thiết kế không viền màn hình của iPhone X để lại một cái rãnh ở cạnh trên của máy, nơi đặt cụm cảm biến Face ID và camera trước. Cái rãnh này không chỉ khiến cho thiết kế của iPhone X trông không được thực sự hoàn hảo, mà nó còn khiến các nhà phát triển ứng dụng và thiết kế web phải đau đầu.

    apple-dua-ra-giai-phap-cho-cac-nha-thiet-ke-web-de-thich-nghi-voi-cai-ranh-tren-iphone-x-1.jpg
    Thiết kế mới của iPhone X để lại một cái rãnh ở cạnh trên.

    Nguyên nhân là do khi sử dụng iPhone X ở chế độ màn hình ngang, cái rãnh này có thể che đi một phần màn hình hiển thị của ứng dụng và các trang web. Một số nhà phát triển đã tìm cách thích nghi với cái rãnh trên iPhone X, bằng cách tùy biến giao diện để tự động lùi vào trong. Hay thậm chí có nhà phát triển đã biến cái rãnh này thành một phần giao diện, có thể kéo ra để xuất hiện các tùy chọn.

    Apple đã chính thức đưa ra hướng dẫn cho các nhà lập trình web, để có thể thích nghi với màn hình của chiếc iPhone X. Với công cụ Webkit của Apple được bổ sung các đoạn code và kỹ thuật, để giúp giao diện mới của các trang web sẽ không bị ảnh hưởng bởi cái rãnh trên iPhone X.
    apple-dua-ra-giai-phap-cho-cac-nha-thiet-ke-web-de-thich-nghi-voi-cai-ranh-tren-iphone-x-2.jpg
    Apple đưa ra khu vực an toàn cho các nhà thiết kế, nhưng vẫn có thể tận dụng phần còn lại.

    Công cụ mới giúp các nhà thiết kế web vẫn có thể tận dụng khoảng trống hai bên trên màn hình iPhone X, nhưng các nội dung chính sẽ không bị che bởi cái rãnh. Apple đưa ra một khu vực được gọi là an toàn, mà các nội dung hiển thị sẽ không bị ảnh hưởng cái rãnh trên hoặc là thanh điều hướng phía dưới màn hình.

    Các nhà thiết kế web có thể thoải mái hiển thị nội dung chính trong khu vực an toàn này. Nhưng bên cạnh đó, nếu muốn họ vẫn có thể tận dụng các khoảng trống còn lại trên màn hình iPhone X. Chúng ta có thể thấy rõ trong ví dụ dưới đây.

    apple-dua-ra-giai-phap-cho-cac-nha-thiet-ke-web-de-thich-nghi-voi-cai-ranh-tren-iphone-x-3.jpg
    Giao diện chưa phóng to toàn màn hình.
    apple-dua-ra-giai-phap-cho-cac-nha-thiet-ke-web-de-thich-nghi-voi-cai-ranh-tren-iphone-x-4.jpg
    Giao diện phóng to toàn màn hình nhưng chưa được tùy chỉnh.
    apple-dua-ra-giai-phap-cho-cac-nha-thiet-ke-web-de-thich-nghi-voi-cai-ranh-tren-iphone-x-5.jpg
    Giao diện toàn màn hình đã được tùy chỉnh lại.

    Như vậy, các nhà thiết kế web và phát triển ứng dụng sẽ phải tốn thêm một chút công sức để có thể thích nghi với giao diện mới của iPhone X. Nhưng may mắn là nó sẽ không còn gây ra sự khó chịu cho người sử dụng nữa.

    Tham khảo: Phonearena
    Link gốc: http://genk.vn/apple-dua-ra-giai-ph...-cai-ranh-tren-iphone-x-20170925153938195.chn
     
  2. SvenSeaGal

    SvenSeaGal Thành viên

    Bài viết:
    131
    Đã được thích:
    12
    tự nhiên thêm cái ở trên mất luôn 1 đoạn trông chán vãi nhỉ
    sao nó ko cắt luôn chỗ đấy đi cho đẹp :D
     
  3. hdtc

    hdtc Thành viên nhiệt tình

    Bài viết:
    739
    Đã được thích:
    127
    ôi cái tai thỏ nhìn chẳng thấy đẹp tý nào quan điểm cá nhân thích con note 8 hay s8 màn tràn viền vẫn sướng hơn nhìn con này tự nhiên có cái rảnh ở ngay giữa
     
  4. thanhnganvn

    thanhnganvn Thành viên

    Bài viết:
    193
    Đã được thích:
    32
    Thế là phải chạy theo iphone X à, Apple quyền lực vkl.
    Mầ có anh em nào mua iphone X chưa vậy, chia sẻ cảm nhận tí đi.
     
  5. Phan Tâm

    Phan Tâm Thành viên nhiệt tình

    Bài viết:
    749
    Đã được thích:
    196
    Cái này mình nghĩ chỉ cần trình duyệt hỗ trợ hiển thị tốt trên Iphone X là được, còn ở phía website thì không cần làm gì cả cho phức tạp.
    Ảnh như trong bài viết là website hiển thị fullscreen, chứ bình thường nó luôn hiển thị mặc định có cả toolbar, urlbar,... của trình duyệt nữa.
     
    FEAR-SEO thích bài này.
  6. research

    research Thành viên tích cực

    Bài viết:
    311
    Đã được thích:
    45
    Thực quá rảnh rỗi mà. Tự dựng đú đởn full viền xong để cái rãnh rõ xấu, xong bh lại phải thiết kế web theo cái rãnh đấy nữa à. mệt!!
     
  7. dovanphuong

    dovanphuong Thành viên nhiệt tình

    Bài viết:
    848
    Đã được thích:
    404
    Đúng là để thích nghi tốt với Apple thì các nhà phát triển trình duyệt web sẽ vất vả chứ ko phải những người lập trình web. Apple chưa đủ quyền lực để đặt ra 1 chuẩn thiết kế riêng. 1 mình chống lại cả thế giới không được đâu :))
     
  8. duchero

    duchero Thành viên tích cực

    Bài viết:
    419
    Đã được thích:
    59
    Kiểu này lại phải kiểm tra user agent xem phải iphone X không. Hoặc không thì anh em xài iPhone X dùng để nghe gọi và làm mọi thứ... Còn lướt web thì dùng máy khác :v
     
  9. comblog

    comblog Thành viên tích cực

    Bài viết:
    359
    Đã được thích:
    83
    Ai thấy cái iphone X này đẹp chứ mình thấy nó thiết kế quá chán, tự nhiên có cái rãnh nhìn ngứa cả mắt
    P/s: ai cho thì xài chứ không ngu bỏ tiền mua :D, Fan iphone mà
     
  10. nobita_nhocdaika

    nobita_nhocdaika Thành viên

    Bài viết:
    63
    Đã được thích:
    11
    mình ko có iphone x để chỉnh site cho nó tương thích giờ phải làm sao nhỉ hix , ai cho mượn giùm vài bữa để edit ko ,
     
    ilovevteco thích bài này.

Chia sẻ trang này