jquery-mobile - 如何使用 Jquery Mobile 根据平台更改按钮大小

Question

如何使用 jQuery Mobile 根据平台更改按钮大小？我在显示网格按钮时使用了网格。但是，当我在具有大屏幕尺寸的设备或 iPad 上部署应用程序时，按钮看起来就像是在屏幕的一侧。我该如何解决这个问题？

Answer 1

正确的方法是通过纯 css 媒体类型。这是一个响应式列表视图的实例，它的宽度由屏幕宽度决定：

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/，您应该调整结果区域的大小以查看差异。

Answer 2

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
}