如何让jquery mobile显示更大的元素？答案

【问题标题】：how to make jquery mobile display larger elements?如何让jquery mobile显示更大的元素？
【发布时间】：2012-10-24 18:40:03
【问题描述】：

我正在为平板电脑开发一个 jQuery Mobile 应用程序，发现默认元素大小有点小。我试图改变元初始比例但没有运气:(

是否有可能让 jQuery Mobile 扩大一切，比如扩大 30%？也许，一个 CSS 技巧可以做到这一点？

TIA, 阿德里安。

【问题讨论】：

<meta name="viewport" content="width=device-width, initial-scale=1.3, maximum-scale=2"> 不起作用？ -- 更改所有的 CSS 可能有效，但必须有更简单的方法：/

标签： css jquery-mobile scale

【解决方案1】：

我将推荐一种我已经使用过几次的 JavaScript 方式：

HTML：

<div class="foo">content to be scale to 130%</div>
<div>content that won't be scaled</div>

JavaScript：

var scale = function(target, css_rule, value)
{
    var type = document.defaultView.getComputedStyle(target, "").getPropertyValue(css_rule).match(/[a-zA-Z]{0,2}$/); //Get unit type from end of string

    value = (parseInt(document.defaultView.getComputedStyle(target, "").getPropertyValue(css_rule)) * value); //Get current value of css_rule and multiply by entered value

    target.style.cssText += css_rule + ':' + value + type + ';'; //Add css_rule to cssText with value and type
}

然后您可以使用以下代码调用此代码：

var elem = document.getElementsByClassName('foo')[0];
scale(elem, 'font-size', 1.3);

jsFiddle of this example

此示例将类的 font-size 扩展 30%，然后您可以将其应用于您希望扩大的任何和所有 CSS 规则。

您可能想扩展我的脚本以删除已被某些 Regular Expressions 覆盖的旧 cssText 规则，您可以在此 here. 上阅读更多信息

希望对你有帮助，可能还有更简单的方法，不过这段代码可以随时调用，让你轻松放大缩小元素

注意：

这个例子使用了一种不常见的方式来获取元素的样式，Computed Style，它只适用于 Safari、Opera、Google Chrome 和 Firefox。

对于 Internet Explorer 使用：elem.currentStyle

【讨论】：

然后，对于每个元素，我必须添加 class="foo"?
是的，你可以把类名改成你想要的，甚至改成class="scale_130" 表示它是130%，只要你通过那个类调用函数，毕竟元素具有分配给它的类
嗯...周围会有很多 class="foo"... 是否可以利用一些继承机制？
您可以并且也许应该使用单位“em”，它是基于没有该 CSS 规则的任何情况的百分比，因此您可以尝试在任何地方使用它，然后只更改 body 的值缩放，或者，您可以定位可能的 TagName ，它有时覆盖比 ClassName 更多的元素