ブラウザのウィンドウサイズに応じて1から0.5に縮小されたWebページがあります。今私のページでは、divの中に小さな正方形があり、ページ全体の中央に配置したいと思っています。したがって、私が達成する必要があるのは、ブラウザの幅の100%を満たす幅をdivに与えることです。のようなものを使用するwidth:100%
と、幅がブラウザウィンドウの幅(つまり1600px)に設定されるため、私が探している結果は得られません。しかし、私のページが縮小されると、1600pxは小さすぎます。それで私は次のようなことをしようとしました:
$square.css('width', (viewportWidth*negscale) + 'px');
ここnegscale
で3-(2*scale)
、はです。たとえば、ページを0.5(つまり、半分のサイズ)に拡大縮小negscale
すると、2になり、正方形の幅はビューポートの幅の2倍になります。奇妙な部分は、0,5と1の場合は完全に正常に機能することですが、divの幅の間のすべてのスケールでどういうわけか大きすぎます。どうしてそうなるのか、本当に考えられません。
誰かが私が間違っていることを知っていますか、またはビューポートの100%を満たすためにdivがどれくらいの幅でなければならないかを知る別の方法がありますか?