CSSで計算式を可能にできるcalc()ファンクション。

calc()ファンクションはパーセントとピクセルを混合した大きさを指定できるので
レスポンシブサイトを作る時はかなり重宝する。

例えば100%のwidthから10px引いた幅にしたいときは

.content{
    width:calc(100% - 10px);
}

と言った感じで書くことができる。

何とも便利なcalcだけど、こいつはiOS7未満とかAndroid4.4未満の古い環境では対応していない。
レスポンシブサイトだとまだまだ見過ごせないので結構致命的。

calc()ファンクションを古い環境で対応させる

ベンダープレフィックス付ければ古いSafariやiOSには対応できるけど
Androidは4.4でしか効かないんじゃあんまり意味が無い。
かと言って見た目が近い数値を指定するのも何か違う。

て事でjqueryで無理矢理CSS計算させちゃえばいいやって所に落ち着く。

上の例と同じ指定をするならこう書けばいい。

$(function() {
	$('.content').css('width', '100%').css('width', '-=10px');
});

適当な対応だけど効けばいいｗ

jQuery

• 
• Tweet