Làm cách nào để ẩn thanh địa chỉ của trình duyệt trên thiết bị di động?

Safari và Chrome trên thiết bị di động đều bao gồm thanh địa chỉ hiển thị khi trang tải. Khi body của trang cuộn, những trình duyệt này sẽ di chuyển thanh địa chỉ tắt màn hình để cung cấp cho bất động sản nhiều hơn đến các trang web như thể hiện trong hình ảnh này:Làm cách nào để ẩn thanh địa chỉ của trình duyệt trên thiết bị di động?

Tôi đang chạy vào một chút của một vấn đề với trang web của tôi cho phép điều này. Tôi đang làm việc trên một Pokedex có chứa một danh sách rất dài của tất cả các Pokemon. Tuy nhiên, với cách tôi đã thiết lập trang nó không muốn di chuyển thanh địa chỉ ra khỏi tầm nhìn.

html của tôi trông giống như:

<body> 
    <app> <!-- My Angular2 tag for the app, no special styles for this --> 
    <nav>...</nav> <!-- The red nav bar and hamburger menu, default bootstrap --> 
    <div class="fluid-container">...</div> <!-- The container for all pokemon entries --> 
    </app> 
</body>

Nếu tôi cuộn xuống cuối tuyệt đối của danh sách (đó là 721 mục) sau đó bất kỳ di chuyển nhiều hơn sẽ di chuyển thanh địa chỉ ra khỏi đỉnh của màn. Nếu tôi chạm vào thanh điều hướng và kéo nó lên trên thì thanh địa chỉ sẽ di chuyển khỏi màn hình. Cả hai cách này dường như không trực quan để làm điều này.

Tôi tưởng tượng có một số cách tôi cuộn phần thân của trang bằng javascript sẽ ẩn nó nhưng what I've tried so far không hoạt động. Không có cuộn hiển thị nào xảy ra khi tôi làm điều đó.

Làm cách nào để cuộn trang đủ để ẩn thanh địa chỉ của trình duyệt trên điện thoại di động ngay sau khi tải trang?

CHỈNH SỬA: Tôi càng xem xét kỹ hơn, dường như không thể làm điều đó mà không có sự tương tác của người dùng. Nếu tôi yêu cầu tương tác người dùng, liệu có thể chạm vào người dùng ở giữa màn hình để lần đầu tiên di chuyển cơ thể trước khi cố gắng di chuyển div với tất cả các mục trong đó? Nếu điều này hoạt động theo cách tôi đang suy nghĩ thì trước tiên nó sẽ trượt thanh địa chỉ ra khỏi con đường trước khi trượt qua danh sách. Đó là loại đảo ngược của hành vi trình duyệt mặc định vì vậy nó có thể không được có thể/dễ dàng/đáng tin cậy, nhưng tôi sẵn sàng để thử và xem nếu có ai có bất kỳ ý tưởng.

Nguồn

2016-05-23 Corey Ogburn

Bạn có thể thử 'window.onload = function() {setTimeout (function() { \t \t window.scrollTo (0, 1); \t}, 0); } 'nhưng đối với các trình duyệt mới nhất, tôi sẽ đề xuất 'Toàn màn hình api' – Rayon

Tham khảo http://www.html5rocks.com/en/mobile/fullscreen/ – Rayon

này nên là mã bạn cần phải ẩn thanh địa chỉ:

window.addEventListener("load",function() { 
    setTimeout(function(){ 
     // This hides the address bar: 
     window.scrollTo(0, 1); 
    }, 0); 
});

Cũng cái nhìn tốt đẹp Pokedex bằng cách này! Hi vọng điêu nay co ich!

Nguồn

2016-05-23 16:12:48 NiallMitch14

Điều này không hiệu quả đối với tôi trên Nexus 6 chạy Android N. mới nhất Tôi không có iPhone để kiểm tra. Điều này có thể là vì tôi đang sử dụng Angular2. Cửa sổ có thể kích hoạt sự kiện tải trước khi tất cả các yêu cầu AJAX nhận dữ liệu pokemon trở lại. Nếu điều đó xảy ra chiều cao tài liệu có thể không được điền vào. Tôi đã cố gắng gọi này sau khi những yêu cầu AJAX và nó vẫn không hoạt động. –

không hoạt động trên Iphone 6 –

Không hoạt động trên iOS 10. –

Hãy nhìn vào HTML5 này đá bài - http://www.html5rocks.com/en/mobile/fullscreen/ về cơ bản bạn có thể sử dụng JS, hoặc API toàn màn hình (lựa chọn tốt hơn IMO) hoặc thêm một số siêu dữ liệu cho người đứng đầu để chỉ ra rằng trang này là một webapp

Nguồn

2016-05-23 16:16:36

Tôi đã thêm thẻ meta và bây giờ giao diện ứng dụng/hoạt động tốt khi tôi lưu trang web vào máy tính để bàn của mình nhưng tôi không thể tải API toàn màn hình để hoạt động khi tải.Nó có thể yêu cầu sự tương tác của người dùng để làm điều đó. –

Vâng, trên PC của tôi, tôi nhận được điều này trong bảng điều khiển: 'Không thể thực thi' requestFullScreen 'trên' Element ': API chỉ có thể được bắt đầu bằng cử chỉ người dùng.' –

Làm cách nào để ẩn thanh địa chỉ của trình duyệt trên thiết bị di động?

Trả lời

Các vấn đề liên quan