JQuery不適用於手機

我有一個網站，它主要面向桌面用戶。但是，它也應該在新手機上正確呈現。我在我的網站中有很多jQuery腳本，例如圖像滾動/滑塊，懸停時顯示子菜單等。這些在桌面上工作得非常好。JQuery不適用於手機

但是，它在移動瀏覽器上無法正常工作。此外，移動瀏覽器上未正確顯示頁面佈局。在移動瀏覽器中看到的頁面上的不同部分顯示爲分散的。我使用webmatrix開發了該網站，並使用了在每個頁面上呈現的單個佈局頁面。我在佈局頁面上包含了jquery移動源代碼。

我認爲這個問題將被排序。但不是。它仍然不起作用。有人能告訴我在頁面上正確包含jquery mobile的正確方法嗎？正常的jquery版本和jquery移動版本之間是否存在兼容性問題？請幫忙。

我的網站的網址是：www.devanghevan.com

來源

2013-07-28 Manish_Kanvinde

jQuery Mobile的是不會解決你的問題，視。我沒有看到我的iPhone5上的任何腳本錯誤...看到這個問題/答案︰http://stackoverflow.com/questions/6293511/using-viewport-to-create-a-mobile-friendly-version –

如果你想使用jQuery Mobile，您必須重寫使用jQuery Mobile的約定所有的意見。這很長...看到這個教程的開始。這是有點舊，但你會得到這個想法： http://www.ubelly.com/2012/02/jquery-mobile-101/

爲了快速解決，將這個元標記添加到您的HTML頭。這將防止移動設備在渲染頁面時縮小。

<meta name="viewport" content="width=device-width, initial-scale=1" />

來源

2013-07-28 18:07:47 jibai31

您可以使用jQuery Mobile的：

一般的頁面佈局是

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script> 
</head> 
<body> 

<div data-role="page"> 

    <div data-role="header"> 
     <h1>My Title</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p>Hello world</p>  
    </div><!-- /content --> 

</div><!-- /page --> 

</body> 
</html>

，如果您需要在桌面版網頁轉換爲jQuery Mobile的，你需要重寫大部分視圖頁面因大多數組件如圖像滾動條/滑塊，懸停的顯示子菜單可能無法在移動版本上正常工作。

或者您可以使用媒體查詢定義的div不同的像素

@media screen and (max-width: 480px) and (orientation: portrait){ 
    /* some CSS here */ 
    /*define css for all divs*/ 

} 

/* #### Mobile Phones Landscape #### */ 
@media screen and (max-width: 640px) and (orientation: landscape){ 
    /* some CSS here */ 
    /*define css for all divs*/ 
} 

/* #### Mobile Phones Portrait or Landscape #### */ 
@media screen and (max-width: 640px){ 
    /* some CSS here */ 
    /*define css for all divs*/ 
}

來源

2013-07-29 07:03:19

嗨，感謝您的建議。你說：「如果你需要將桌面頁面轉換成jquery mobile，你需要重寫大部分視圖頁面，因爲大多數組件像圖像滾動/滑塊，懸停時顯示子菜單可能無法在移動版本上正常工作。」通過這個，你的意思是，我需要爲每個div添加數據角色？幻燈片/在懸停點擊功能上會有任何邏輯變化嗎？我需要更改jQuery代碼中的任何內容嗎？ –

JQuery不適用於手機

回答

相關問題