javascript - Jquery Mobile 中的按钮自动调整大小

Question

我正在开发一个 jquery/PhoneGap 应用程序。我一直在努力让按钮按照我想要的方式运行。简而言之，我正在努力实现以下目标:

1. 我放置了一组六个 Jquery-Mobile 按钮(迷你、普通或按钮组)。
2. 上面的集合需要在一条水平线上，所以我把它们放在一个 div 中。

按钮的数量及其文本会动态变化，因此我需要一个 CSS/JS 技巧，允许我根据 div/屏幕大小调整按钮大小和文本的大小。当我开始使用 Jquery Mobile 时(两周前)，我认为这将是一个基本功能 :) 但唉!

我现在正在尝试的一些代码是:

//TO CREATE BUTTONS
for(var button_id=0; button_id < window.g_maxLength/2; button_id++){
var bt_id= "<button  class =\"tile\" data-theme=\"e\" data-inline=\"true\" data-mini=\"true\" id =\"button_tid"+button_id+"\";>.</button>";
$("#buttoncontainer1").append($(bt_id)); 
}

//HTML
<div id="tiled" align="center">
            <div data-role="controlgroup" data-type="horizontal" id="buttoncontainer1">
        <!-- Button will be added by JS-->
        </div>
</div>
//CSS
#tiled {

align:center; 
height:23%; 
position:absolute;
text-align :center;
padding: 1px;
width:90%;
top:73%;
margin-right:4%;
margin-left:4%; 
background-color:#b0e0e6;   
border-radius: 10px;
border-width: 3%;
border-style:double;

现在我所拥有的在小屏幕设备上运行良好，但是一旦我在大屏幕设备上打开我的应用程序，按钮看起来非常小并且有很多空白区域。在这里的任何帮助将不胜感激!!

PS:也使用了媒体查询 - 但不知何故它们在 jquery-mobile 上不起作用。

@media (min-width: 500px) {
            html { font-size: 120%; }
        }

Answer 1

这是自动调整按钮的宽度和字体大小的解决方法。

演示:http://jsfiddle.net/Palestinian/UYa4Y/

// Number of buttons
var buttons = $('[data-   role=controlgroup]').find('a').length;
// Parent div width
var btn_width = $('#tiled').width() / buttons;

// Remove left/right button padding
$('.ui-btn-inner').css({
 'padding-left': 1,
    'padding-right': 1
});

// Set button new width
$('.ui-btn-inner').width(btn_width - 4);

// Adjust font-size for each button based on text
$('.ui-btn-text').each(function () {
 while ($(this).width() > $('.ui-btn-inner').width()) {
    var font = parseFloat($(this).css('font-size')) - 1 + "px";
    $(this).css('font-size', font);
 }
});