Trang Web PhoneView của Windows Phone 8 không tĩnh (jQuery Mobile/PhoneGap)

Question

Các lời xin lỗi về tiêu đề mơ hồ; tuy nhiên tôi đang cố gắng chuyển ứng dụng PhoneGap của chúng tôi đang hoạt động tốt trên Android và iOS lên Windows Phone 8 (được viết bằng jQuery Mobile/JavaScript, HTML và CSS3).

Phần lớn nó hoạt động (mặc dù tôi đã phải thay đổi một vài bit nhưng điều đó đã được mong đợi). Một vấn đề lớn mà tôi đang gặp phải hiện nay là nhận được chức năng danh sách cuộn của ứng dụng của chúng tôi đang hoạt động và việc chụp chữ ký (cả hai tôi tin là có liên quan). Tôi không chắc chắn vấn đề nằm ở đâu nhưng khi tôi cuộn/ký, toàn bộ trang di chuyển bằng ngón tay của tôi và các yếu tố riêng lẻ không nhận được sự kiện chạm. Tôi đang sử dụng iScroll, jQuery 1.7.2 và jQM 1.1.0; tuy nhiên, tiếp tục đọc vì chức năng cuộn là hoạt động (tính năng ký luôn là vấn đề)!

trước khi cuộn ngừng làm việc, tôi đã có một vấn đề với khoảng cách giữa các thanh cuối trang và cuối trang:

Một điều tôi được khuyên là nên làm là để thêm chút sau CSS; và nó giải quyết 'chênh lệch' phát hành:

@media screen and (orientation: portrait) { 
    @-ms-viewport { 
     width: 320px; 
     user-zoom: fixed; 
     max-zoom: 1; 
     min-zoom: 1; 
    } 
} 

Tuy nhiên, sau đó nó gây ra các tính năng di chuyển để trở thành không phản hồi. Toàn bộ trang di chuyển lên/xuống nhưng không phải là phần tử danh sách mà ngược lại với những gì tôi muốn! Tôi đã thử thêm nội dung sau đây nhưng không có may mắn:

-ms-touch-action: none; 

Tôi đã thêm phần tử này vào phần tử div chứa trang. Nó dừng trang di chuyển lên và xuống! Tuy nhiên danh sách vẫn không phản hồi. Tuy nhiên, nếu tôi xóa cả hai lớp CSS này, thì chức năng cuộn lại hoạt động trở lại, nhưng lại giới thiệu lại vấn đề về khoảng cách. Lớp CSS của khung nhìn chắc chắn là con đường chính xác mà tôi tin - nhưng tôi không thể, cho cuộc sống của tôi, làm cho nó hoạt động theo cách tôi muốn.

Nếu ai đó có thể trợ giúp, nó sẽ được đánh giá cao.

Cảm ơn.

Answer 1

Trước hết, @ -ms-viewport không hỗ trợ thu phóng, vì vậy hãy loại bỏ thuộc tính thu phóng vì chúng sẽ tạo ra lỗi phân tích cú pháp. Các tính chất hỗ trợ được liệt kê here

Thứ hai, cố gắng thêm các quy tắc này để CSS của bạn và sử dụng iScroll trong container trung tâm của bạn như bạn nói bạn đã làm

@-ms-viewport{width:device-width;} 

body { 
    overflow: hidden; 
    -ms-user-select: none; 
    -ms-content-zooming: none; 
    -ms-touch-action: none; 
} 

Answer 2

bạn có thể sử dụng điều này trong css của bạn và nó sẽ sửa chân trang của bạn.

[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}