Cấu hình ứng dụng web Android

Question

Ứng dụng web iPhone có sẵn bốn (configuration features) (không bao gồm bộ đệm ứng dụng HTML5) để định cấu hình cách các trang web hoạt động khi bạn lưu trang web vào màn hình chính làm dấu trang.

1. Bạn có thể chỉ định biểu tượng trang chủ.
2. Bạn có thể chỉ định hình ảnh khởi động hiển thị khi trang web đang tải.
3. Bạn có thể ẩn giao diện người dùng trình duyệt.
4. Bạn có thể thay đổi màu thanh trạng thái.

Bốn tính năng làm việc bằng cách thêm thẻ vào < đầu > như thế này:

<link rel="apple-touch-icon" href="/custom_icon.png"/> 
<link rel="apple-touch-startup-image" href="/startup.png"> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

Đương nhiên, không ai trong số những "apple-" thẻ cụ thể làm bất cứ điều gì trong Android. Nhưng có cách nào để làm một cái gì đó tương đương? [Ở mức tối thiểu, tôi muốn người dùng có thể thêm trang web của tôi vào màn hình chính Android của họ (ví dụ: trong Android 2.0) và có biểu tượng có độ phân giải cao.]

Answer 1

Đây là câu hỏi ngày, vì vậy câu trả lời đã thay đổi. Chrome trên các Android mới hơn có thẻ meta riêng của nó cho việc này. Đảm bảo bạn Thêm vào Màn hình chính và khởi chạy từ màn hình chính. Dấu trang thông thường là không đủ. Chrome hiện đang sử dụng một vài chỉ thị của apple, nhưng ba ở phía dưới là ma thuật android.

<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<link rel="apple-touch-startup-image" href="startup.png"> 
<link rel="apple-touch-icon" href="youricon.png"/> 
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="youricon.png"> 

<meta name="mobile-web-app-capable" content="yes"> 
<link rel="shortcut icon" sizes="196x196" href="youriconhighres.png"> 
<link rel="shortcut icon" sizes="128x128" href="youricon.png"> 

Answer 2

Khi bạn tạo lối tắt trên màn hình chính đến một bookmark, Android sẽ sử dụng một apple-touch-icon-precomposed nếu có (nhưng không apple-touch-icon) như là một độ phân giải cao biểu tượng:

<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/> 

đối với phần còn lại của các tính năng, tôi không nghĩ rằng có cách nào để làm điều này tại có mặt mà không xuất bản ứng dụng Android hoạt động như một trình bao bọc cho trang web của bạn.

Answer 3

này có thể quan tâm đến độc giả:

http://code.google.com/p/android/issues/detail?id=7657

Trong 2.1-Update1, trên Droid, và tôi đoán 2. * điện thoại hệ điều hành khác, khi thêm một bookmark vào màn hình chính, màn hình chính chỉ hiển thị biểu tượng tùy chỉnh nếu liên kết rel = "apple-touch-icon" hoặc apple-touch-icon-precomposed có đường dẫn url đầy đủ.

Answer 4

tôi đã cố gắng nêu trên từ Samsung Galaxy S1 tôi

Không làm việc cho tôi ... nhưng những gì đã làm việc lần đầu tiên được tạo một bookmark và sau đó thêm dấu đó như là một phím tắt để nhà của tôi. Làm điều này khiến biểu tượng chính xác được sử dụng.

Answer 5

Có những yếu tố meta khác nhau mà chúng ta có thể sử dụng để đạt được kết quả tốt nhất có thể:

1a) Trước hết chúng ta cần phải thiết lập các khung nhìn cho các ứng dụng của chúng tôi như vậy:
<meta name="viewport" content="width=device-width, initial-scale=1">

1b) Có một chút hack ở đây, đối với các thiết bị có màn hình cao hơn (ví dụ: iPhone 5):
<meta name="viewport" content="initial-scale=1.0">
Chỉ cần đặt nó dưới thẻ meta kia và nó sẽ thực hiện tất cả phép thuật .

2) Bây giờ chúng tôi có những điều cơ bản, chúng tôi sẽ yêu cầu các trình duyệt di động "đọc" trang web của chúng tôi như thể đó là một ứng dụng. Có hai yếu tố meta chính:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
này sẽ làm cho trang web của chúng tôi sẽ được mở trong toàn màn hình chế độ và phong cách mặc định thanh trạng thái.

3) Chúng tôi đã hoàn thành với các yếu tố meta "hành xử", giờ đây hãy bắt đầu với các biểu tượng của chúng tôi. Số lượng biểu tượng và dòng mã sẽ phụ thuộc hoàn toàn vào bạn. Đối với hình ảnh khởi động, tôi muốn tạo một biểu tượng cho mỗi độ phân giải, do đó "bộ nạp" của tôi hoạt động giống nhau trên tất cả các thiết bị (chủ yếu là các thiết bị của Apple). Đây là cách tôi đã làm nó:

*<!--iPhone 3GS, 2011 iPod Touc-->* <br> 
`<link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-320-460.png" media="screen and (max-device-width : 320px)">` <br> 

*<!--iPhone 4, 4S and 2011 iPod Touch-->* <br> 
`<link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-640x920.png" media="(max-device-width : 480px) and (-webkit-min-device-pixel-ratio : 2)">` <br> 

*<!--iPhone 5 and 2012 iPod Touch-->* <br> 
`<link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-640x1096.png" media="(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)">` <br> 

*<!--iPad landscape-->* <br> 
<link rel="apple-touch-startup-image" sizes="1024x748" href="../images/mobile-icon-startup-1024x768.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)"> <br> 

*<!--iPad Portrait-->* <br> 
`<link rel="apple-touch-startup-image" sizes="768x1004" href="../images/startup-768x1004.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)">` <br> <br> 

Chú ý: Định dạng phải PNG và tất cả các kích thước phải được tôn trọng, nếu không nó sẽ không hoạt động.

4) Để hoàn tất, chúng tôi cũng sẽ cần một số biểu tượng cho ứng dụng của chúng tôi. Biểu tượng này sẽ được hiển thị trên menu thiết bị. Đây là cách tôi đã làm nó:

*<!--iPhone 3GS, 2011 iPod Touch and older Android devices-->* <br> 
`<link rel="apple-touch-icon" href="../images/mobile-icon-57.png">` <br> 

*<!--1st generation iPad, iPad 2 and iPad mini-->* <br> 
`<link rel="apple-touch-icon" sizes="72x72" href="../images/mobile-icon-72.png">` <br> 

*<!--iPhone 4, 4S, 5 and 2012 iPod Touch-->* <br> 
`<link rel="apple-touch-icon" sizes="114x114" href="../images/mobile-icon-114.png">` <br> 

*<!--iPad 3rd and 4th generation-->* <br> 
`<link rel="apple-touch-icon" sizes="144x144" href="../images/mobile-icon-144.png">` <br> 

Chú ý: Bạn cũng có thể sử dụng "precomposed" cho biểu tượng của bạn không được hiển thị với iOS sáng phản chiếu. Chỉ cần thêm từ này nơi bạn xác định rel là:
<link rel="apple-touch-icon-precomposed" href="../images/mobile-icon-57.png">

Như đã nói, điều này hoạt động tốt hơn trên các thiết bị của Apple. Nhưng biểu tượng ứng dụng đã được chứng minh trên các thiết bị Android và nó hoạt động.