以前のプロジェクトで、訳あってレスポンシブとか使えないので、<html>にzoomを指定して、どんな機種でも画面幅にあわせるようにzoom値を変更する処理というのを行っていました。
さらにその中で、そのページをどうしても画面内に収めたいという仕様が降りてきました。イメージとしては、以下のような感じ。
<html> <== 画面幅を合わせるためにzoomする
<body>
<div id="content"> <== スクロールしないように画面長に収めるようにzoomする
コンテンツ
</div>
</body>
</html>
以下のようにJavaScriptの処理を記述しました。
var windowHeight = window.innerHeight;
var contentHeight = $('#content').innerHeight();
if( contentHeight > windowHeight ) {
var ratio = windowHeight/contentHeight;
$('#content').css({
"zoom": (ratio*100) + "%"
});
}
ただ、これだと想定より小さくならなかったので、試行錯誤しました。ふと色んな端末で数値をみていると、htmlのzoomの値に比例していそうと気づきましたので、htmlのzoom値を計算に入れたら上手くいきました。zoomの中でzoomすると親元のzoom値を考慮しなくてならないようです。上記の処理を以下のように変更しました。
var windowHeight = window.innerHeight;
var contentHeight = $('#content').innerHeight();
// htmlのzoom値を考慮に入れる (この処理が必要！)
var zoom = $('html').css('zoom');
if( zoom != null ) contentHeight = contentHeight*zoom;
if( contentHeight > windowHeight ) {
var ratio = windowHeight/contentHeight;
$('#content').css({
"zoom": (ratio*100) + "%"
});
}
これでなんとなく上手くいきます。これがzoomだらけの要素ばかりになると処理が大変そうですね（笑）そもそもzoomを使うことなんてレアなケースだとは思いますので、滅多に遭遇しないとは思いますが、なるほどなと思ったので参考になれば。