8

I understand that the default behavior of iOS regarding device-width might be to try to render websites using a viewport width of 980px, and setting width=device-width might be useful (particularly if you are developping a Cordova/mobileApp/SPA.

However I'm not sure to understand when should we set height=device-height. Does adding this line have any effect? Isn't it the default behavior to use the device height as the viewport height?

I have a mobile app, that is available both as a mobile website and a cordova native app. There are 2 separate index.html pages with different settings (legacy):

// Mobile website has:

// Cordova has:

I'd like to know the risks I encounter of using the same content value for both cases (which seems like it's mostly arround device-height)

I didn't find the online documentation to be really helpful on that subject. Any idea?

Sebastien Lorber
  • 89,644
  • 67
  • 288
  • 419

1 Answers1

7

The online documentation you linked does point to the specs:

https://drafts.csswg.org/css-device-adapt/#width-and-height-properties

device-width and device-height translate to 100vw and 100vh respectively

Ernesto Ramírez Romero
  • 357
  • 1
  • 4
  • 1
    But what I'd like to know is what is the default value of `device-height` if we don't set it? – Sebastien Lorber Jun 28 '16 at 14:30
  • Technically **device-height** is value not a property. So you can set **height** to the value of **device-height**, else **height** defaults to **auto**. More info at https://drafts.csswg.org/css-device-adapt/#height-desc – Ernesto Ramírez Romero Jun 28 '16 at 14:43
  • Yes it was a mistake, I was talking about setting `height`. What effect does it have to set it to `heigh=device-height` VS not setting any `height` value. Auto = ? – Sebastien Lorber Jun 28 '16 at 14:48
  • So setting **height** to **device-width** ensures you are setting your viewport to the height of the device rather than the rendered space. It behaves exactly like **width**. In my projects it seems adding *width* is enough but you always have the option to be more explicit if you want. – Ernesto Ramírez Romero Jun 28 '16 at 15:00
  • Then what is the size of the default rendered space? on iOS not setting it seems to means width will be `980px` for example. What does it mean to not set `device-height` – Sebastien Lorber Jun 28 '16 at 15:02