How to make sure everything in the html page fit inside the screen size of the device?

I am trying to fit content of the html page inside the device screen for all device proportionally, for example, something fits perfectly inside the iphone 6 screen needs scrolling on the iphone 4, how do I achieve that if it’s possible?

I have had a similar case with my app too. I have a page with a timer and content on top and bottom. A big part of this is font size, it’s good to make sure that the fonts are scaling correctly. I found this angular module (what ionic is made on so it works perfectly) to be a huge help!

That allows text to fit horizontally and scale to the device.

With other content I would recommend using CSS media queries.

I have to do this for a lot of my app to make sure that going from my 6 Plus to the iPhone 4 that everything works still. You basically just create a query for a super small screen, a medium, and a large screen and set your specific CSS styles for certain elements in each.

I hope I could guide you in the right direction, it’s definitely one of those things that takes a lot of thought about the design of your app.