phonegap ipad/iphone, có một ứng dụng duy nhất trên cả hai thiết bị

Question

Vì vậy, tôi đã thực hiện phát triển điện thoại trong một thời gian và đã thực hiện một vài ứng dụng trong cửa hàng ứng dụng. Tôi đã thực hiện các ứng dụng iphone và ipad và làm cho chúng hoàn toàn riêng biệt. Tôi biết táo cho phép gửi một ứng dụng duy nhất có thể được định dạng cho cả hai thiết bị, câu hỏi của tôi là làm thế nào điều này được thực hiện với phonegap? Tôi biết tôi có thể chỉnh sửa cài đặt dự án và chọn ipad/iphone cho thiết bị đích. Nhưng tôi phải làm gì trong mã của mình để làm cho nó hoạt động chính xác?

Vì đó là html, tôi kiểm soát kích thước bằng html (và jquery). Ví dụ trong ứng dụng iphone của tôi, tôi có thể có:

<img src="asdf.jpg" width="480"> 

Và sau đó cùng một ứng dụng ipad sẽ là:

<img src="asdf.jpg" width="1024"> 

Nó sẽ thực sự tuyệt vời nếu tôi chỉ có thể có hai file html trong www của tôi thư mục, ví dụ: index.html và index-ipad.html, sau đó chia sẻ các thư mục img, css và js chung. Điều này có thể không?

Tôi đã kiểm tra tài liệu trên điện thoại rộng rãi và không thể tìm thấy bất kỳ thứ gì. Ai đó có thể chỉ cho tôi một hướng dẫn để làm điều này? Tôi thực sự ghét có nhiều ứng dụng trong cửa hàng ứng dụng cho cùng một nội dung.

EDIT PER COMMENT DƯỚI

Có lẽ tôi sẽ không sử dụng các thuộc tính chiều rộng trong html, có lẽ tôi sẽ làm điều này:

<img src="asdf_ipad.jpg"> 

và:

<img src="asdf_iphone.jpg"> 

nơi hai hình ảnh đã được kích thước cho hai thiết bị. Trong mọi trường hợp, tôi có thể xử lý html/js/css, tôi chỉ cần biết làm thế nào để thực hiện một "chuyển đổi" như vậy mà ipad ám khác nhau từ iphone.

Answer 1

Bạn có thể chỉ định tệp PhoneGap nào mở ban đầu. Hãy nhìn vào ứng dụng: didFinishLaunchingWithOptions từ AppDelegate.m

Do something như thế này để mở một trang chỉ mục khác nhau cho iPad:

if ([[[UIDevice currentDevice] model] containsString:@"iPad"]) { 
    ... 
    self.viewController = [[[MainViewController alloc] init] autorelease]; 
    self.viewController.wwwFolderName = @"www-ipad"; 
    self.viewController.startPage = @"index.html"; 
    ... 
} 

Answer 2

Một lựa chọn:

<img src="asdf.png" class="asdf"/> 

.ipad .asdf { 
    width: 1024px; 
} 
.iphone .asdf { 
    width: 480px; 
} 

$(function() { 
    var deviceType = (device.platform=='iPhone' && screen.width==768) ? 'ipad' : 'iphone'; 
    $('body').addClass(deviceType); 
}); 

Note logic deviceType là khá đơn giản (ví dụ: iPad bị khóa trong bức chân dung), bạn sẽ cần phải mở rộng logic để xử lý định hướng và có khả năng thêm thậm chí lý hơn nữa để phát hiện các thiết bị Retina và trong iPad có độ phân giải cao hơn trong tương lai.

Answer 3

tại sao không sử dụng truy vấn phương tiện CSS để xác định thiết bị đích của bạn và cập nhật hình ảnh phù hợp? Ví dụ, JqueryMobile thực hiện điều này để cung cấp các biểu tượng có độ phân giải cao cho các thiết bị Retina ...

Here's an article về cách sử dụng các biểu tượng này để áp dụng các bảng định kiểu khác nhau cho iPhone và iPad.

Hy vọng điều này sẽ hữu ích!

Answer 4

Vâng, tôi tìm thấy một giải pháp, tôi chỉ sử dụng javascript để chuyển tiếp trang để trang html khác của tôi như thế này:

if(screen.width==768) 
    window.location='index-ipad.html'; 

Vì vậy, tôi chỉ có mã trong file index.html của tôi, và sau đó, tất nhiên, tôi có một tệp index-ipad.html khác. Điều này mang lại cho tôi sự tự do để làm bất cứ điều gì tôi muốn và không giới hạn tôi chỉ để thay đổi phong cách nhỏ. Lưu ý, điều này không làm việc bên trong công cụ jquery onload $ (function() {}); đi con số.

Tôi muốn giải quyết vấn đề này bằng cách tiếp cận "phía máy chủ", nghĩa là lớp c mục tiêu mà lớp này nằm trên đó. Nhưng, thật không may, kỹ năng của tôi trong mục tiêu c không hoàn toàn ngang bằng. Nếu ai đó có thể cho tôi giải pháp đó, tôi sẽ đánh giá cao điều đó!