Orientation change and screen.width

HTML & CSS
1

I noticed that changing device orientation (android phone) causes screen.width to change. For example on my Huawei android phone when in the portrait position screen.width == 360px while in landscape 640px. Taking into account that (at least as far as i know) screen.width holds device-width property value why the code below:

@media screen and (max-device-width:360px){ div { background-color: green; } } @media screen and (min-device-width:361px){ div { background-color: blue; } }
Doesn’t work?

If device-width is linked with screen.width shouldn’t it’s value change accordingly with the actual device orientation just like screen.width does?

2

Hi there Mulligan81,

forget the “device” and do it like this…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
div {
   width: 22.5em;
   padding: 2em;
   margin: auto;
   border: 0.06em solid #000;
   box-sizing: border-box;
   background-color: blue;
 }
@media screen and (max-width:22.5em){
  div {
    background-color: green;
  }
}
</style>

</head>
<body> 
 <div></div>
</body>
</html>

coothead

2 Likes
3

:+1:
More about that here:-

1 Like
4

They are separate things. Device width is the width of the device. If you spin the device sideways that won’t change its width! The device width is still the same but you just turned it on its side :). Device width refers to the device and not the viewport.

In simple terms min and max-width refer to the viewport width which is something completely different and is the space allowed for the display of your page and will widen in landscape mode.

As others have pointed out width is all you are interested in and there’s no real need to know about devices as such. Code your design to adapt to any width automatically you will cater for all devices no matter their size or orientation.

4 Likes
5

Thx for reply but i’m not sure You are right that device-width is always constant per device. How can You explain it if as i wrote > changing device orientation (android phone) causes screen.width to change. If the screen.width reads device-width how could screen.width change while device-width don’t!?

6

If it’s not right, how else do you explain:-

I’m not sure where screen.width comes in to it, that’s javascript syntax, not css media queries.
In css there is device-width, the width of the device, which is constant and width which is the width of the viewport, be that the device screen in either orientation, or the width of a browser window on desktop. So width is the more flexible, useful and meaningful measurement and what you should be using in queries.

7

You missed the point that device width and viewport width are separate things. The device width is the width of your device (it fits in your pocket). The viewport width (screen width if you like) depends on the resolution of the device and does not match the device width especially with double or more density pixels.

If you use device width you are testing for the width of a device not a viewport width available for your design. Switch a phone on its side and the width of the device is the same but however the viewport rotates and gives you more viewport width. These are different things.

Forget about devices and use width as your base but only add media queries based on your design needs and not some imaginary device width as there are hundreds of devices all at various widths and resolutions. Create fluid pages that adapt to all widths and thus automatically cater for all devices now and forever.

6 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.