CODEWITHSUNDEEP
jquery-mobile
user2074601
user2074601

Reputation: 21

how to change button size depending on platform using Jquery Mobile

How to change button size depending on platform using jQuery Mobile? I have used grid in that grid buttons are displayed. But when I deploy app on device having big screen size or iPad then the buttons looks like they are clubbed at one side of screen. How can I resolve this?

Upvotes: 1

Views: 686

Answers (2)

Gajotres
Gajotres

Reputation: 57309

Correct way is through pure css media types. This is a live example of responsive listview, its width is determinated by screen width:

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; } 
}

And here's a working jsFiddle example: http://jsfiddle.net/Gajotres/Yz3nS/, use it to fix your buttons.

EDIT :

Here's a working jsFiddle example for you: http://jsfiddle.net/Gajotres/vjsua/, you should resize a Result area to see a difference.

Upvotes: 1

grigno
grigno

Reputation: 3198

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
}

Upvotes: 1

Related Questions