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
}