Change font of div after changing it's dimensions and rotating it

Question

I am switching the width and height of a div, and rotating it 90 degree - In a way forcing a landscape mode irrespective of mobile orientation. The problem I face is that when the div is rendered initially, it has a font size (quite small). When I switch the dimensions and rotate, the font size remains same. It does not become larger now that the div is wider.

Is there a way that the div can be rendered again, such that the font size is changed according to new div width/height. Just to reiterate the screen width/height is not changing.

I am using jQuery - just in case a simpler solution presents through it.

what u have done so far? – Siful Islam Jun 28 '20 at 08:52 — Siful Islam, Jun 28 '20 at 08:52

score 0 · Answer 1 · answered Jun 28 '20 at 16:31

I just hope this helps someone else. Basically a more elegant way to force a orientation without using orientation.lock is by modifying the solution given here. This way the font issues do not crop up if one has responsive pages. Thus my solution was

appWidth=Math.max(window.innerWidth,window.innerHeight);
        appHeight=Math.min(window.innerWidth,window.innerHeight);
if(window.innerWidth<window.innerHeight) {
        $("body").css({"width": "100vh", "height": "100vw", "height": "100vw", "transform": "translateY(100vh) rotate(-90deg)", "transform-origin": " top left"});
....
} else {
dont do anything.
}

Change font of div after changing it's dimensions and rotating it

1 Answers1