如何使jQuery移动显示更大的元素

Question

我正在开发平板电脑的jQuery移动应用程序，发现默认元素大小有些小。我试图不运气更改元初始规模：（

是否可以使jQuery移动扩展所有内容，例如30％？也许，CSS技巧会做到吗？

tia，阿德里安。

Answer 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

此示例将把类的font-size扩展到30％，然后您可以将其应用于您希望扩展的任何CSS规则。

您可能需要扩展我的脚本以删除已被某些Regular Expressions覆盖的旧CSSTEXT规则，您可以在此处阅读更多信息。

我希望这会有所帮助，并且可能会有一种更简单的方法，但是可以随时调用此代码，使您可以轻松放大元素

注意：

此示例使用一种罕见的方法来获取元素的样式Computed Style，该样式仅在Safari，Opera，Google Chrome和Firefox中起作用。

用于Internet Explorer使用：elem.currentStyle