如何更改按鈕的大小取決於使用JQuery Mobile的平臺使用jQuery Mobile

Question

如何使用jQuery Mobile根據平臺更改按鈕大小？ 我已經使用網格中的網格按鈕顯示。但是，當我將應用部署在屏幕尺寸較大的設備或iPad上時，這些按鈕看起來像是在屏幕的一側杵狀。我該如何解決這個問題？

Answer 1

if(navigator.userAgent.match(/Android/i){ 
     //apply style to element 
}else if (navigator.userAgent.match(/iPhone/i)){ 
     //apply style to element 
}else if (navigator.userAgent.match(/iPad/i)){ 
     //apply style to element 
} 

Answer 2

正確的方法是通過純CSS的媒體類型。這是響應列表視圖的一個活生生的例子，它的寬度是屏幕寬度determinated：

ul { 
float: left; width: 100% !important; 
} 

/* iPhone Horizontal -------------------*/ 
@media all and (min-width: 480px){ 
ul { width: 100% !important; } 
}  

/* iPad Verticle -----------------------*/ 
@media only screen and (min-width: 768px) { 
ul { width: 50% !important; } 
} 

/* iPad Horizontal ---------------------*/ 
@media only screen and (min-width: 1024px) {  
ul { width: 50% !important; } 
} 

/* Nexus 7 Horizontal ------------------*/ 
@media only screen and (min-width: 1280px) {  
ul { width: 33.3333333% !important; } 
} 

/* Laptop 1440 -------------------------*/ 
@media only screen and (min-width: 1440px) {  
ul { width: 33.3333333% !important; } 
} 

/* Monitor 1600 ------------------------*/ 
@media only screen and (min-width: 1600px) { 
ul { width: 25% !important; } 
} 

/* Monitor 1920 ------------------------*/ 
@media only screen and (min-width: 1920px) {  
ul { width: 20% !important; } 
} 

而且這裏有一個工作的jsfiddle例如：http://jsfiddle.net/Gajotres/Yz3nS/，用它來解決您的按鈕。

編輯：

這裏是爲你工作的jsfiddle例如：http://jsfiddle.net/Gajotres/vjsua/，你應該調整一個結果區，看到有差別。