Comments (10)
Currently(version 1.5) width and height can be specified only in device Independent pixels(DIP). It is the default and not unit is required. "20%" is most likely parsed as 20 dips - the width you are getting.
You can take a look at this issue about percentage based width and height it is currently in development and will be available soon.
from docs-v7.
@vakrilov thanks for clarifying - and this issue https://github.com/NativeScript/docs/issues/210 asks for a clarification about what these DIP:s mean also.
Does this mean that in {N}, forever, as long as no unit will be used, DIP will be what's meant?
And all the hardcoded JS values like ".width", ".marginTop" etc. are counted in DIP:s?
Please tell me the definition and how it plays out on Android, iOS and Windows Phone.
https://en.wikipedia.org/wiki/Device_independent_pixel says the definition actually is 0.15875 mm at least on Android, i.e. not has anything to do with pixels.
Please clarify?
This is extremely important for making a layout consistent, so I really need to know, thanks :D
from docs-v7.
Hi @mike-ense
There is very good article explaining device density and device independent pixels here:
http://developer.android.com/guide/practices/screens_support.html
In short - all our layout properties (like width, height, margins, paddings, etc.) are in device independent pixels. Converting it to device pixels is done by multiplying device independent pixels and screen density. So it is not really fixed like 0.15875mm or something.
On iOS density is one so there one DIP is equal to one device pixel.
from docs-v7.
@hshristov , aha.
So on iOS, 1 DIP = 1 actual pixel on the display,
and on Android, 1 DIP = 1 DIP, but there they indeed define it as 0.15875mm no?
from docs-v7.
@mike-ense
Not exactly. In IOS there are 3 different desities depending on the device:
- 1 (for non-retina device) - 1DIP = 1 device pixel
- 2 (for retina) - 1DIP = 2 device pixels
- 3 (iPhone 6 Plus) - 1DIP = 3 device pixels
Here is a detailed explanation.
The idea of DIPs is that they are roughly the same physical size on all devices. So if you set thewidth
of anImage
to be 160 - it will be ~inch(2.54cm) wide on all devices.
from docs-v7.
@vakrilov , aha re iOS I understand.
But on Android, should it be 0.15875mm?
I think on my phone it looks like 2-2.5mm or so
from docs-v7.
There is a pretty good explanation of density-independent pixels in the article that @hshristov posted:
http://developer.android.com/guide/practices/screens_support.html#terms
The size may not be exactly 0.15875mm as some android devices return a rounded value of the density to ease calculations and avoid rounding errors.
from docs-v7.
@vakrilov , so you mean on Android it's going to be somewhere approx in the 0.15-0.16mm range anyhow? Fair enough. :)
from docs-v7.
Just as an update, there is an explanation of percentages now up at https://docs.nativescript.org/ui/layouts#percentage-support. For the DPI discussion Iām going to close this issue in favor of https://github.com/NativeScript/docs/issues/210.
from docs-v7.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
from docs-v7.
Related Issues (20)
- The 'isPassThroughParentEnabled' property doesn't seem to work as intended
- Add the possibility to select the documentation version through a drop-down menu HOT 4
- Improve this repository issue template HOT 2
- NativeScript image builder disapear. HOT 2
- JAVA_HOME variable setup script on linux not compatible with Java-14
- Grammar error in documentation
- Trying to update ns-cookboock but can not find it in repo, nor any documentation that refer to it
- Redo Contributors list
- Date stamp Docs HOT 1
- 3 dead links in https://github.com/NativeScript/docs/blob/master/docs/core-concepts/technical-overview.md
- Outdated doc page: CommonJS in NS apps
- Get Started / CLI Basics - Creating Application HOT 2
- bug: random duplicate instances of elements in API Reference
- Missing Plugin-Reference.md
- Links from search results from search bar in v6 and v7 doc sites are broken HOT 2
- Blog links are not redirecting correctly HOT 4
- [Accessibility] Frameworks icons looks interactive but they are not?
- v8 is missing the majority of v7 topics
- Please document how I can setup a custom font from /src/fonts in a webview
- Wrong import
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from docs-v7.