Menu
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?
334
Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.
This article describes how to use the "viewport" <meta> tag to control the viewport's size and shape.
A simple way to solve this is to use the viewport percentage unit vh instead of %. One vh is defined as being equal to 1% of a viewport's height. As such, if you want to specify that something is 100% of the latter, use " height: 100vh ". Or if you want to make it half the height of the viewport, say " height: 50vh ".
In an SVG document, the viewport is the visible area of the SVG image. You can set any height and width on an SVG, but the whole image might not be visible. The area that is visible is called the viewport. The size of the viewport can be defined using the width and height attributes of the <svg> element.
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
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
