JavaScript có hoạt động trên iOS không?

Thông thường, nếu bạn nhấn "+" trong Safari trên thiết bị di động, sau đó nhấn "Thêm vào Màn hình chính", biểu tượng mà nó tạo ra sẽ hoạt động giống như một dấu trang trong Safari. Khi trình duyệt mở ra, bạn có thanh URL ở trên cùng và thanh nút ở dưới cùng. Nếu bạn đang cố gắng triển khai một ứng dụng thực sự, điều này chỉ làm lãng phí diện tích màn hình và làm giảm cảm giác chuyên nghiệp của nó

Nội dung chính Show

Thay đổi thanh trạng thái điện thoại
ngăn ngừa mở rộng quy mô
Ngăn chặn cuộn đàn hồi
Tạo biểu tượng màn hình chính
Tạo màn hình giật gân
Bộ nhớ đệm tập tin ứng dụng
Phát hiện các sự kiện chạm và cử chỉ
Phát hiện các sự kiện xoay
Bắt chước các thành phần hệ điều hành iPhone
Tạo ứng dụng "Objective-C" gốc
Lời khuyên
iPad kỳ quặc
Phát hiện hệ điều hành iPhone
Ví dụ. Điều hướng biểu đồ đa chạm
Ví dụ. Ứng dụng đăng nhập y tế
Tại sao JavaScript không được kích hoạt trên iPhone?
Apple có sử dụng JavaScript không?

Để loại bỏ thanh URL và nút, chỉ cần thêm thẻ meta

<meta name="apple-mobile-web-app-capable"
      content="yes" />

Đây là giao diện của ứng dụng nhật ký của tôi khi được khởi chạy từ màn hình chính

Thay đổi thanh trạng thái điện thoại

Bạn cũng có thể thay đổi cách hiển thị thanh trạng thái của điện thoại bằng thẻ meta. Bạn có thể làm cho nó trắng, đen hoặc mờ

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

Các giá trị cho nội dung là

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

7 và

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

ngăn ngừa mở rộng quy mô

Nếu bạn chụm vào một ứng dụng web, nó vẫn phản hồi giống như trong trình duyệt và phóng to. Đây có thể là một món quà mà ứng dụng không có nguồn gốc. Nếu bạn muốn ngăn tỷ lệ, hãy sử dụng thẻ meta chế độ xem

<meta name="viewport"
    content="user-scalable=no, width=device-width" />

Bạn gần như chắc chắn cũng muốn đặt chiều rộng của khung nhìn thành chiều rộng của thiết bị để ứng dụng hiển thị ở độ phân giải tự nhiên của nó

Ngăn chặn cuộn đàn hồi

Nếu bạn vuốt một ứng dụng web qua cuối hoặc trên cùng của trang, thì trang đó sẽ bị kéo ra khỏi thanh URL hoặc thanh nút (hoặc dưới cùng/trên cùng của màn hình nếu ở chế độ toàn màn hình)

Hành vi này là một quà tặng khác mà ứng dụng của bạn không phải là gốc và hiếm khi là hành vi bạn muốn trong một ứng dụng gốc

Để dừng hành vi này, hãy ghi lại các sự kiện

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

9 trên tài liệu bằng JavaScript và hủy chúng. Bạn có thể thực hiện việc này bằng cách thêm trình xử lý vào thẻ

<meta name="viewport"
    content="user-scalable=no, width=device-width" />

0 và gọi phương thức

<meta name="viewport"
    content="user-scalable=no, width=device-width" />

1 trên đối tượng sự kiện

<script>
 function BlockMove(event) {
  // Tell Safari not to move the window.
  event.preventDefault() ;
 }
</script>

<body ontouchmove="BlockMove(event);" >
  ...
</body>

Tạo biểu tượng màn hình chính

Để thêm biểu tượng màn hình chính, hãy tạo biểu tượng 114x114. png và sau đó liên kết với nó trong tiêu đề

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

iPhone tự động áp dụng lớp hoàn thiện bóng

Trên iPhone cũ hơn, sử dụng các biểu tượng 56x56 và iPad, sử dụng các biểu tượng 72x72, đồ họa sẽ tự động thu nhỏ lại

Nếu bạn không muốn lớp hoàn thiện bóng được áp dụng tự động, hãy sử dụng

<meta name="viewport"
    content="user-scalable=no, width=device-width" />

2 thay vì

<meta name="viewport"
    content="user-scalable=no, width=device-width" />

Tạo màn hình giật gân

Để thêm màn hình giật gân trong khi tải, hãy tạo 320x460. png và sau đó liên kết với nó trong tiêu đề

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

Tệp phải có kích thước chính xác là 320x460, nếu không thì iPhone sẽ bỏ qua nó. (iPad yêu cầu 1004x768. )

Bộ nhớ đệm tập tin ứng dụng

Nếu bạn muốn có thể sử dụng ứng dụng của mình mà không cần internet hoặc bạn muốn cải thiện thời gian tải của ứng dụng, hãy tạo tệp kê khai bộ đệm và liên kết tới tệp đó từ tệp chính cho ứng dụng web

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

Đảm bảo máy chủ web của bạn hoạt động. các tệp kê khai có loại MIME

<meta name="viewport"
    content="user-scalable=no, width=device-width" />

4, nếu không, điều này sẽ không hoạt động. Nếu bạn đang sử dụng apache, hãy đặt phần sau vào tệp

<meta name="viewport"
    content="user-scalable=no, width=device-width" />

5 của bạn

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

Và sau đó kiểm tra bằng cách sử dụng

<meta name="viewport"
    content="user-scalable=no, width=device-width" />

6 để đảm bảo rằng loại nội dung trong tiêu đề phản hồi là chính xác

Bên trong tệp

<meta name="viewport"
    content="user-scalable=no, width=device-width" />

7, liệt kê tệp nào sẽ được lưu vào bộ đệm và tệp nào sẽ được truy xuất từ mạng

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

Nếu bạn thấy ứng dụng của mình đột nhiên ngừng hoạt động khi bạn bắt đầu sử dụng tệp kê khai bộ đệm, hãy đảm bảo rằng mọi URL bạn sử dụng đều nằm trong phần bên phải

Khi sử dụng tệp kê khai bộ đệm, ứng dụng sẽ khởi chạy với phiên bản cuối cùng của tệp

Nó kéo một phiên bản mới của tệp kê khai trong nền nếu có kết nối mạng và trong lần khởi chạy tiếp theo, bạn sẽ thấy phiên bản mới nếu tệp kê khai đã thay đổi. Bạn sẽ muốn bao gồm một số sê-ri trong nhận xét trong tệp kê khai bộ đệm để bạn có thể cập nhật nó mỗi khi phát hành phiên bản mới;

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

Tôi khuyên bạn nên đổi tên tệp kê khai để tệp 404 trong quá trình phát triển lặp lại

Phát hiện các sự kiện chạm và cử chỉ

Bạn có thể nắm bắt các sự kiện cử chỉ và đa chạm trong JavaScript. Và, có một lý do tốt để làm điều này quá. nếu bạn lắng nghe các sự kiện truyền thống như nhấp chuột, bạn sẽ bị chậm một giây trong khi iPhone làm nổi bật yếu tố "được nhấp. " Nếu bạn đang cố gắng bắt chước một ứng dụng thực, hành vi này bắt đầu gây cảm giác tẻ nhạt và chậm chạp. Bằng cách nắm bắt trực tiếp các sự kiện chạm, bạn có thể phản hồi tức thì với đầu vào của người dùng

Có hai cách để theo dõi các sự kiện chạm. Khi bạn ghi lại các sự kiện chạm thô, bạn đang theo dõi từng ngón tay. Khi bạn ghi lại các sự kiện cử chỉ, bạn đang ghi lại các diễn giải về chuyển động của ngón tay, chẳng hạn như chia tỷ lệ và xoay

Trình xử lý cảm ứng bạn có thể đính kèm là

<meta name="viewport"
    content="user-scalable=no, width=device-width" />

8 - một ngón tay đi xuống

<meta name="viewport"
    content="user-scalable=no, width=device-width" />

9 - một ngón tay cử động

<script>
 function BlockMove(event) {
  // Tell Safari not to move the window.
  event.preventDefault() ;
 }
</script>

<body ontouchmove="BlockMove(event);" >
  ...
</body>

0 - một ngón tay giơ lên

Trình xử lý cử chỉ bạn có thể đính kèm là

<script>
 function BlockMove(event) {
  // Tell Safari not to move the window.
  event.preventDefault() ;
 }
</script>

<body ontouchmove="BlockMove(event);" >
  ...
</body>

1 - quy mô hoặc vòng quay bắt đầu

<script>
 function BlockMove(event) {
  // Tell Safari not to move the window.
  event.preventDefault() ;
 }
</script>

<body ontouchmove="BlockMove(event);" >
  ...
</body>

2 - thang đo hoặc phép quay

<script>
 function BlockMove(event) {
  // Tell Safari not to move the window.
  event.preventDefault() ;
 }
</script>

<body ontouchmove="BlockMove(event);" >
  ...
</body>

3 - thang đo hoặc vòng quay kết thúc

Nếu bạn chỉ muốn sử dụng thao tác chạm thay cho nhấp chuột, thì trường

<script>
 function BlockMove(event) {
  // Tell Safari not to move the window.
  event.preventDefault() ;
 }
</script>

<body ontouchmove="BlockMove(event);" >
  ...
</body>

4 của đối tượng sự kiện chứa phần tử đã được chạm

Tôi đã tạo một ứng dụng mẫu sử dụng cử chỉ để chia tỷ lệ biểu đồ

Ngoài ra còn có một bài viết tuyệt vời về các sự kiện chạm và cử chỉ trong JavaScript, nếu bạn muốn cung cấp hỗ trợ đa chạm sâu hơn

Để biết thêm mã và ứng dụng JavaScript thứ hai sử dụng nhiều cử chỉ, hãy xem bài đăng ứng dụng iPhone thứ hai của tôi. một điều khiển từ xa cảm ứng đa điểm cho một robot

Phát hiện các sự kiện xoay

Nếu bạn muốn thực hiện hành động khi xoay điện thoại, hãy lắng nghe sự kiện

<script>
 function BlockMove(event) {
  // Tell Safari not to move the window.
  event.preventDefault() ;
 }
</script>

<body ontouchmove="BlockMove(event);" >
  ...
</body>

5 trên thẻ

<meta name="viewport"
    content="user-scalable=no, width=device-width" />

0. Hướng hiện tại là

<script>
 function BlockMove(event) {
  // Tell Safari not to move the window.
  event.preventDefault() ;
 }
</script>

<body ontouchmove="BlockMove(event);" >
  ...
</body>

7 và được mã hóa dưới dạng góc (tính theo độ) mà iPhone được xoay--0, -90 hoặc 90--ra khỏi hướng thẳng đứng

Bắt chước các thành phần hệ điều hành iPhone

Công cụ kết xuất webkit hỗ trợ rất nhiều tiện ích mở rộng CSS và bạn có thể sử dụng chúng để mô phỏng các thành phần Cocoa gốc;

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

Tôi đã tạo nền giống như iPhone cho ứng dụng ghi nhật ký của mình với

<script>
 function BlockMove(event) {
  // Tell Safari not to move the window.
  event.preventDefault() ;
 }
</script>

<body ontouchmove="BlockMove(event);" >
  ...
</body>

8 cho nội dung tài liệu

Cuốn sách Xây dựng ứng dụng iPhone bằng HTML, CSS và JavaScript có thể chỉ cho bạn cách mô phỏng tất cả các phần tử giao diện người dùng iPhone tiêu chuẩn.

Tạo ứng dụng "Objective-C" gốc

Nếu bạn muốn xuất bản ứng dụng của mình trong cửa hàng ứng dụng, bạn sẽ cần viết ứng dụng đó trong Mục tiêu-C. May mắn thay, Cocoa bao gồm một lớp

<script>
 function BlockMove(event) {
  // Tell Safari not to move the window.
  event.preventDefault() ;
 }
</script>

<body ontouchmove="BlockMove(event);" >
  ...
</body>

9, đây chỉ là trình duyệt Mobile Safari không có chrome. Vì vậy, bạn thực sự có thể đóng gói ứng dụng HTML/CSS/JavaScript của mình một cách tự nhiên bằng cách gói nó trong một vài dòng Mục tiêu-C đóng hộp

Tất nhiên, khi bạn kết thúc ứng dụng web của mình dưới dạng ứng dụng gốc, bạn có thể sử dụng Objective-C để truy cập nhiều tính năng hơn của iPhone. Nếu bạn muốn tham gia lập trình Objective-C, tôi khuyên bạn nên đọc cuốn sách Ca cao và Mục tiêu-C. Lên và chạy vừa là tài liệu tham khảo vừa là hướng dẫn.

Dưới đây là các bước cơ bản để biến ứng dụng web thành ứng dụng gốc

Mở XCode
Tạo dự án iPhone "Ứng dụng dựa trên chế độ xem" mới
Di chuyển các tệp cho ứng dụng web của bạn vào thư mục Tài nguyên trong XCode, nhưng loại bỏ tệp kê khai bộ đệm. (Bạn không muốn bảng kê khai làm hỏng mọi thứ, vì mọi thứ hiện tại đều là cục bộ. )

Tạo một biến thể hiện mới, webView, bên trong tệp tiêu đề @interface ViewController.

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

1và tạo tài sản.

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

Trong tệp triển khai ViewController, tổng hợp webView.

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

Mở tệp giao diện ViewController từ thư mục Tệp trình tạo giao diện
Từ menu Đối tượng của Thư viện, kéo một thành phần Chế độ xem Web vào cửa sổ bố cục/thiết kế
Chọn ViewContoder. cửa sổ xib, sau đó là Chủ sở hữu tệp
Kết nối (bằng cách kéo) ổ cắm webView từ cửa sổ kết nối với Chế độ xem web
Quay lại XCode
Triển khai phương thức viewDidLoad trong tệp triển khai ViewController.
```
<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />
```
4Điều này sẽ tải chỉ mục. html từ thư mục Tài nguyên khi khởi chạy
Kích hoạt nó trong trình giả lập. Bây giờ bạn sẽ thấy ứng dụng của mình

Bối rối?

Lời khuyên

Tải xuống iPhone SDK và thử nghiệm với iPhone/iPad Safari mô phỏng. Chỉ thực hiện kiểm tra trên chính iPhone khi bạn đang kiểm tra xem hiệu suất có đủ tốt không
Cài đặt ứng dụng từ một địa chỉ IP thay vì tên máy chủ để giảm thời gian tra cứu DNS khi khởi chạy ứng dụng
JavaScript trên iPhone không xử lý tốt nhiều thao tác chuỗi;
Tận dụng các thư viện JavaScript như jQuery để giảm bớt sự tẻ nhạt

iPad kỳ quặc

Tạo các ứng dụng web gốc cho iPad gần giống với việc tạo các ứng dụng web gốc cho iPhone. Thay đổi lớn nhất là hình ảnh khởi động của bạn phải có kích thước chính xác là 1004x768. Ngoài ra, nó hầu như giống nhau

Phát hiện hệ điều hành iPhone

Bạn có thể muốn ứng dụng của mình hoạt động hơi khác một chút tùy thuộc vào nơi ứng dụng chạy. Tôi đã sử dụng đoạn JavaScript sau để phát hiện xem ứng dụng có đang chạy bên trong iPhone, iPod Touch hay iPad hay không

<meta name="apple-mobile-web-app-status-bar-style"
      content="default" />

lưu trữ

Nếu bạn đang tìm kiếm một nhà cung cấp dịch vụ lưu trữ cho ứng dụng web của mình, tôi khuyên dùng linode. com

Tôi đã chạy có thể. net trên linode trong nhiều năm và tôi đang sử dụng chúng để lưu trữ ứng dụng ghi nhật ký y tế của mình

Họ khó bị đánh bại về giá cả, hiệu suất, tính linh hoạt và dịch vụ khách hàng

Mã số

Hãy sử dụng mẫu của tôi. html, một ứng dụng web trống sơ khai

Ví dụ. Điều hướng biểu đồ đa chạm

Tôi đã viết một ứng dụng tạo canvas toàn màn hình, sau đó cho phép bạn phóng to và thu nhỏ đồ thị f(x) = sin(x) bằng cử chỉ chụm để thu phóng

Điều này chạy tốt trên iPad của tôi và trong trình giả lập, nhưng hơi khó hiểu trên iPhone thế hệ đầu tiên của tôi

Vui lòng chọc ngoáy và sửa đổi mã. đồ thị. html

Ví dụ. Ứng dụng đăng nhập y tế

Ứng dụng ghi nhật ký y tế là một ví dụ hay vì nó tự lưu trữ phần lớn cục bộ, chỉ sử dụng mạng để đồng bộ hóa thông qua các tập lệnh PHP tương tác với cơ sở dữ liệu

Tại sao JavaScript không được kích hoạt trên iPhone?

Trên iPad và iPhone, JavaScript bị tắt theo mặc định. Khi bạn bật JavaScript và Cookies trong trình duyệt Safari của mình, đăng nhập có thể sẽ thành công. Để bật JavaScript trên iPad hoặc iPhone của bạn, hãy chọn Cài đặt, Safari và Nâng cao; . to adjust Cookies choose Settings, Safari and uncheck Block Cookies.

Apple có sử dụng JavaScript không?

Apple Safari được tích hợp sẵn một công cụ JavaScript giúp các phần tử trang web trở nên tương tác. Và mặc dù bạn không thực sự cần thiết phải kích hoạt nó để sử dụng trình duyệt Safari của mình, nhưng có lẽ bạn sẽ muốn làm điều đó để tận hưởng trải nghiệm duyệt web liền mạch.