HTML elements do not change width on iPad pro when rotating to landscape orientation

0
votes

To demonstrate this issue, I have a very simple webpage with a single div element with width set to 100%, and a background color to verify its width. On most devices I've viewed this on (PC, smart phones, tablets), everything behaves exactly as expected. However, I have an iPad pro 11" that will show the page properly in portrait mode in Chrome:

Portrait mode

But when rotating to landscape mode, it keeps the same width in pixels and does not extend to 100% of the new width:

Landscape mode

I tried searching for this issue for hours, but never seemed to come across anyone with my exact issue. I came across numerous answers that said to make various changes to the <meta name="viewport" ... /> tag, all of which I tried to no avail. It's almost as if rotating the device does not tell the browser that the viewport dimensions have changed. I am fairly new to front end web design and very new to responsive design for mobile devices, but it seems like something as simple as an inline style for width 100% should suffice for my needs here.

Can anyone offer some guidance?

EDIT: I discovered that I can load the page initially in landscape mode and get the desired 100% width, but then when I rotate to portrait I have the opposite problem - the element extends to the right beyond the edge of the screen. And again this only seems to happen on this specific model of iPad (Pro 11).

1
htmlcssiosipadresponsive-design

1 Answers

0
votes

My trick for always getting the HTML body to occupy the whole page while the children can behave responsibly is doing:

body { 
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}

Then the child div inside the body could be:

div {
    background: red;
    height: 20px;
    width: 100%;
}

The trick here is basically making the body responsive with the browser's viewport and allowing the children to flow inside the body.

Tip: try to brush up on CSS3's Flex and Grid model, which is the norm nowadays, and will allow you implement flexible layouts.