Chỉ tải tập lệnh JQuery Mobile cho thiết bị di động

Tôi có trang web phải được hiển thị chính xác trên thiết bị di động. Để làm như vậy, tôi đã tải tập lệnh JQuery Mobile vào đầu trang. Thẻ head trông giống như sau:Chỉ tải tập lệnh JQuery Mobile cho thiết bị di động

<head> 
    <title>Page Title</title> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
</head>

Và được sử dụng trong phần tử của phần tử dữ liệu để hiển thị mọi thứ. Các trang trông khá tốt trên các thiết bị di động, nhưng nó trông tương tự ngay cả khi yêu cầu đến từ một trình duyệt không di động.

Tôi muốn biết liệu có ai đó biết phương pháp tải tập lệnh JQuery Mobile chỉ khi yêu cầu đến từ thiết bị di động hay không.

gì tôi đã cố gắng cho đến nay là sử dụng một chức năng mà detectd đại diện của tôi sử dụng và tải các kịch bản nếu nó là một thiết bị di động:

function init() { 

    if(isMobile()) { 
     document.write('<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />'); 
document.write('<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>'); 
dcument.write('<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>'); 
    } 
} 


function isMobile() { 

    if(navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.userAgent.match(/IEMobile/i)) 
      return true; 
     return false; 
}

Nguồn

2012-07-05 giocarmine

Thật khó để phát hiện xem điện thoại của bạn là điện thoại di động hoặc máy tính bảng hoặc màn hình lớn với cảm ứng, nhưng để bắt đầu với

sử dụng kịch bản để phát hiện từ http://detectmobilebrowsers.com/
thử nghiệm sử dụng http://yepnopejs.com/

Như thế này (nên làm việc cho jQuery kịch bản từ http://detectmobilebrowsers.com/):

yepnope({ 
    test : jQuery.browser.mobile, 
    yep : 'mobile_specific.js', 
    nope : ['normal.js','blah.js'] 
});

EDIT:

Cũng có một cái nhìn tại https://github.com/borismus/device.js, cho tải nội dung dựa trên điều kiện. Tôi không chắc liệu nó có cho phép bạn tải các tệp JS có điều kiện hay không.

Nguồn

2012-07-05 11:16:55 Nachiket

cảm ơn bạn, mặc dù chức năng tôi tìm thấy để phát hiện các trình duyệt di động dường như hoạt động, detectmobilebrowsers chắc chắn là tốt hơn nhiều :) vấn đề chính của tôi là làm thế nào để tải tập lệnh JQuery dựa trên điều kiện đó: ( – giocarmine

sử dụng liên kết Javascript bình thường được cung cấp trong detectmobilebrowser.com – Nachiket

có vẻ như là tôi thực sự không cần phải thực hiện tải tập lệnh js có điều kiện, vì vậy tôi nghĩ rằng tất cả các liên kết bạn đã cung cấp đều cần hơn :) cảm ơn bạn một lần nữa! – giocarmine

Làm cách nào để xác định xem có nên sử dụng bố cục trên thiết bị di động dựa trên chiều rộng thiết bị hay không, chẳng hạn như khung CSS chẳng hạn như Twitter Bootstrap không? Bằng cách này, bạn có thể thiết kế cho các thiết bị nhỏ sử dụng jQuery di động và cho những người khác với vanilla jQuery? Thử nghiệm với yepNope hoặc tương tự vẫn được áp dụng, tôi nghĩ vậy.

Nguồn

2012-10-19 15:37:53 savolai

Chỉ tải tập lệnh JQuery Mobile cho thiết bị di động

Trả lời

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