Width of html page on mobile devices?

Question

css

Hello.
I decided to make a web page that would be displayed on a computer, ipad and smartphone in a readable form, but that was not the case.
The problem that confused me is the following:
in the css file, I defined the property of the outer div max-width: 980px; height: 100%;
on the screen, this div takes up no more than 980 pixels, if the window is compressed to a smaller size, then the div takes up the entire width.
on ipad, the page always occupies the entire width, but the length of the line in characters is preserved when the screen is rotated, and when the screen is oriented vertically, the page is scaled, so that the text, which is normally readable in horizontal orientation, is read worse on vertical (the letters have become smaller).
On a smartphone, the situation is even more fun: there the length of the line in characters is about the same as on the ipad, but the page is scaled so that the text cannot be read without magnification, but when you zoom in, horizontal and vertical scrolling appears.
Also, I tried applying css media queries. so, the media screen and (max-width: 980px) request worked on the ipad. on a smartphone, it worked at a width of 790px. both vertically and horizontally.
From the above, we can conclude that the width that is used in the css engine of the mobile browser is actually the largest linear distance between opposite screen walls.
And now, in fact, the question is: how to make a page that will be displayed normally both in the vertical and horizontal layout of the smartphone screen.
PS Maybe someone will tell you a link to a page that changes its appearance when the ipad's screen is rotated?

Answer 1

Try the HTML5 Boilerplate HTML Frameworks . Everything is already done in them. I can't say for sure on the iPad, but on an Android tablet, layout with media queries works fine with both screen orientations.

Answer 2

Colleagues. Thanks a lot for the tips. There are advances in layout for mobile devices.
I added the /> tag to the block. The
Android smartphone then began to display the page normally, and when the orientation changes, the width changes and the appearance adapts to it. But the ipad only scales the page when changing the orientation. It is a pity that there is no iphone at hand to test this moment somehow.
I continue to get acquainted with the topic of layout for mobile phones, thanks again for the tips.

Answer 3

If there is no device at hand - use f12 - toggle device mode (button in the form of a smartphone), select any device and see how it will be displayed.