Không thể ẩn thanh điều hướng trong Safari iOS 7 cho iPhone / iPod touch

Tôi không tin rằng có bất kỳ giải pháp nào để ẩn các thanh theo cách lập trình bằng javascript / css / html, nhưng hãy để tôi thử mô tả một vấn đề. Chúng tôi là nhóm các nhà phát triển trò chơi di động và chúng tôi đã phát triển trò chơi được một năm.

Sau khi thông báo iOS 7, chúng tôi đã phải đối mặt với vấn đề là KHÔNG THỂ ẩn các thanh điều hướng. Khi người dùng nhấn vào phần trên hoặc phần dưới của trình duyệt Safari, các thanh điều hướng sẽ xuất hiện trở lại và ẩn tất cả các điều khiển của trò chơi.

Giải pháp duy nhất mà chúng tôi đã tìm thấy cho đến nay là buộc người dùng:

1. Xoay thiết bị
2. Cuộn trang
3. Thêm ứng dụng vào Màn hình chính

Không có lựa chọn thay thế nào trong số này được chấp nhận. Có vẻ như Apple đã biết về vấn đề này nhưng vẫn tiếp tục phớt lờ nó. Họ đã đóng một lỗi được báo cáo là trùng lặp với lỗi # 14076889.

Tôi tin rằng chúng tôi không phải là đội duy nhất gặp phải vấn đề tương tự. Có ai biết cách giải quyết không?

Cập nhật tháng 9 năm 2014: iOS 8 đã loại bỏ minimal-uitính năng Một lần nữa, không có cách nào để xóa / ẩn các thanh điều hướng ngoài việc dựa vào hành vi mặc định của trình duyệt (các thanh sẽ bị ẩn khi cuộn, nhưng chỉ khi phần tử cuộn làBODY của trang). "Cách giải quyết" duy nhất là lưu ứng dụng vào màn hình chính và đặt thẻ meta phù hợp (xem bên dưới).

Cập nhật tháng 8 năm 2014: iOS 8 (beta) không còn hỗ trợminimal-ui . Không có giải pháp thay thế. (Lý do cho điều này có thể là do sự lạm dụng của các trang web đã sử dụng nó để cố gắng ngăn mọi người điều hướng đi, vì có thể có các tính năng mới trong iOS 8 Safari chưa được công bố thay thế minimal-ui.)

iOS 7.1 đã thêm một API mới để giải quyết vấn đề này:

<meta name="viewport" content="minimal-ui">

Cờ chế độ xem mới này ẩn giao diện người dùng Safari theo mặc định (chỉ một thanh tiêu đề nhỏ với URL và chỉ báo SSL được hiển thị). Để truy cập giao diện người dùng Safari, người dùng phải chủ động nhấn vào thanh tiêu đề này.

Lưu ý rằng trên iOS 7.0.x, không có API hoặc cách giải quyết đã biết nào cho việc này. Trong các phiên bản đó, nếu bạn muốn ẩn chrome trình duyệt của Safari vĩnh viễn, bạn cần yêu cầu người dùng thêm ứng dụng web vào màn hình chính (với các thẻ meta thích hợp được đặt <meta name="apple-mobile-web-app-capable" content="yes">) hoặc sử dụng một số loại trình bao bọc ứng dụng gốc như Phonegap và phân phối qua App Store.

Cá nhân tôi, tôi ước họ đã không loại bỏ nút "toàn màn hình" mà họ đã giới thiệu ở chế độ ngang trên iOS 6 Mobile Safari, đây là một giải pháp tuyệt vời khiến các nhà phát triển và người dùng hài lòng.

Một ứng cử viên hoàn hảo để giải quyết vấn đề này lâu dài hơn là Mobile Safari hỗ trợ API toàn màn hình HTML5 (được hỗ trợ trên Safari trên OS X!). Than ôi, không có hỗ trợ ngay bây giờ và các bản phát hành iOS điểm trước đây không thêm các tính năng Safari mới, vì vậy có thể đó là thứ dành cho iOS 8.

CẬP NHẬT : Có một thuộc tính meta để sửa lỗi này hiện đang ở iOS7.1 Beta theo bài đăng trên diễn đàn này trên ghi chú phát hành.

<meta name="viewport" content="minimal-ui">

Tôi đã chạy thử nghiệm và có thể xác nhận tính năng này hiện đang ở phiên bản Beta 2.

LƯU Ý : Tùy chọn Minim-ui mới là một giải pháp tuyệt vời nhưng nó cần phải là một phần của phản hồi HTML. Tôi đã thử trên iOS7.1 beta3 để nối thẻ meta chế độ xem bằng JS

$('head').append('<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">');

giá trị "Minimum-ui" bị trình duyệt bỏ qua.

Cập nhật: iOS7.1 hiện đã được phát hành nên NDA đã được dỡ bỏ.

<meta name="viewport" content="minimal-ui">

Thực sự là thẻ chính xác và hoạt động trong bản phát hành trực tiếp. Hãy nhớ rằng "khung nhìn" có thể hỗ trợ danh sách được phân tách bằng dấu phẩy nếu bạn yêu cầu.

Tôi kết hợp nó với các biến di động khác để làm cho trang web giống như một ứng dụng:

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">

-

Chúng tôi cũng đã phải vật lộn với cái này. Chúng tôi có một TabBar trên trang web của mình và mỗi khi bạn cố gắng nhấp vào một tab, điều khiển safari sẽ bật lên.

Hôm nay hy vọng. Nếu bạn là thành viên của chương trình nhà phát triển apple, tôi thực sự khuyên bạn nên truy cập diễn đàn này: https://devforums.apple.com/message/927476

W

CHỈNH SỬA 2:

Không hoạt động kể từ iOS 7.1

BIÊN TẬP:

Một số trò chơi đã sử dụng lớp phủ gợi ý người chơi cuộn đi các thanh và sau đó khóa cuộn cho đến khi các thanh bật ra một lần nữa. Trong trường hợp này position: fixedsẽ giúp ích rất nhiều, vì nó ổn định chuyển động (không thể giải thích nó tốt hơn, bạn chỉ cần thử nó cho chính mình). Trò chơi này là một ví dụ điển hình về cách tiếp cận như vậy:

www.paf.com/mobile/launch/flowers.html (xin lỗi, không thể đăng nhiều hơn 2 liên kết)

Gần đây, tôi cũng đã tình cờ gặp một vụ hack vô hiệu hóa thanh điều hướng kích hoạt khu vực hàng đầu. Tất cả những gì bạn phải làm là thêm một phần tử ngẫu nhiên vào DOM của bạn với các kiểu sau:

z-index: 100000; /* should be bigger than everything else */
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;

Đọc thêm về nó ở đây .

Nếu bạn đang tạo một ứng dụng web, bạn có thể tạo liên kết đến URL từ màn hình chính; và sử dụng các Thẻ Meta HTML sau:

<!-- Allows fullscreen mode from the Homescreen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Sets the color of the text/battery, wireless icons etc -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Điều này sẽ siêu áp đặt các chỉ số trên thanh tiêu đề / điều hướng của bạn. (Các chỉ báo bạn thấy trên tất cả các màn hình iPad.

Để biết thêm thông tin, hãy xem: https://developer.apple.com/library/safari/documentation/AppleAppilities/Reference/SafariHTMLRef/Articles/MetaTags.html

Hy vọng rằng điều này sẽ giúp ích cho ai đó, nhưng tôi không muốn đặt chế độ xem width = device-width .. vì nó là 480px trên iphone 4 .. và tôi muốn trò chơi của mình ở 800px cho tất cả các thiết bị.

Và nếu bạn không đặt nó, thì Minim-ui sẽ không đăng ký.

Công việc xung quanh tôi đang làm:

<meta name="viewport" content="width=device-width, minimal-ui">

Và sau đó thay đổi chế độ xem khi trang được tải:

  $(window).load(function(){
    $('meta[name=viewport]').attr('content','width=800, maximum-scale=1')
  });

Tôi khá sốc vì nó hoạt động. Thanh địa chỉ và các nút giao diện người dùng thấp hơn chỉ xuất hiện nếu người dùng nhấp vào trên cùng / dưới cùng của màn hình. Yêu nó ngay bây giờ.

Giải pháp này phù hợp với tôi, nhưng trong trường hợp của tôi, ứng dụng web dành cho công chúng riêng tư, nơi tôi có quyền kiểm soát Ipad sẽ được sử dụng.

Tôi đã cố gắng sử dụng tất cả các thẻ meta và hack có thể có, và thực sự, sau khi IOS8 đã loại bỏ tính năng tối thiểu-ui, thực tế là không thể giải quyết được.

Suy nghĩ thấu đáo, nhóm của chúng tôi đã đạt được một giải pháp hay:

Trình duyệt Mercury mở ở chế độ toàn màn hình và ngay cả khi các trang đang được tính phí, thanh địa chỉ vẫn không xuất hiện. Nó là một biểu tượng nhỏ ở dưới cùng bên phải và duy nhất :) Nó hoạt động hoàn hảo cho vấn đề của chúng tôi!

Nhưng tôi nhắc lại: không sử dụng nó nếu bạn đang phát triển một ứng dụng web cho công chúng nói chung. Thật khủng khiếp đối với UX buộc người dùng của bạn phải tải xuống một trình duyệt khác để truy cập ứng dụng.

CẬP NHẬT

Một người bạn là nhà phát triển của tôi đã đưa ra giải pháp này:

Sử dụng chế độ xem web bên trong Titanium từ appcelerator. Nó sẽ không được chấp thuận trên Apple Store, nhưng đối với một sự kiện riêng tư, nó sẽ hoạt động tốt!