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媒体类型。这是响应式列表视图的实例，其宽度由屏幕宽度确定：

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

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

2 个答案: