Comments (8)
I cannot confirm the pixels, but I do see indeed differences yes, like you mention. I will lookin to it this week.
from fries.
Cool, thanks @teusinkorg!
from fries.
It is not pixel perfect, but it is nearing stock.
I base my font-size to 16px and work with percentages and em from there. But when I calculate the sizes back I have different end sizes.
Roughly:
- Smartphone portrait: 42,4 px
- Smartphone landscape: 38,16 px
- Tablet: 48,76 px
Optical those values are almost the same as normal stock. But probably due to some other css values in my code I cannot replicatie the values you have (40,48 and 56).
But I can confirm that the above 3 situations do apply, concerning resizing.
See my css files on github (application.css, application.smartphone.css, application.tablet.css)
Github: https://github.com/teusinkorg/jpHolo/tree/master/assets/www/themes
from fries.
Dude, your jpHolo is smashing! :) Great job on it.
I'm kinda confused with this:
- Tablet: 48,76 px
Can you elaborate that? Is that 48 and 76/100 pixels on landscaped tablet?
Also, this might be useful for us both: http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/#action-bar-height
from fries.
Thanks! And thanks for the link. I will check it coming week.
I measered it with a centimeter (not sure how it is called in English) the action bar. On my devices the heights are (in cm) almost the same between jpHolo and native.
But it is still possible that your pixel values are still correct and that some css-thingy in my template is mixxing up things and gives a different value in pixels, but the same in centimeters (due to scaling).
On the other hand, 56px on a Nexus 10 looks quite different then on a Galaxy Note 10.1. As it scales the user interface, to give the same look on all screens.
So the trick will be, I think, to find a baseline pixels that exactly matches (again, jpHolo is not pixel perfect in that matter :). and scale from there.
As I can be a perfectionist with these kind of things, I will continue the search for perfection :).
I am guesing above and will read the url. Seems very interesting.
Let's keep in touch (and feel free to use code from jpHolo).
from fries.
Right, centimeter. :)
If you read the guidelines on that link real quick, you'll see that the heights on different orientation and devices matches the ones I posted here. I'll probably just stick to that. :)
Same thing for me. I am a bit of a perfectionist as well. That is also why I hated other mobile UI frameworks cough KendoUI cough out there.
Cool, thanks! Will definitely check out how you did the navigation drawers and maybe port it over to Fries. 👍
from fries.
Hi, updated my GitHub project: https://github.com/teusinkorg/jpHolo (saw you forked it, so wanted to let you know). Changed the images and layout more to native.
I will get back to you concerning the url you mentioned. I am very curious how the pixels are calculated and scaled on Android.
from fries.
I checked your supplied URL. I think my dimensions is bit different do to that jQuery Mobile scales and that I overwrite that (partly) with my dimensions.
As of now jpHolo is almost perfect (I fiddled with ms paint (go figure) long enough until it matches 99%).
I think you should stick to the mentioned sizes on the cheat sheet for Fries. You can control the sizes absolute.
But consider the fact that the mentioned sizes are NOT pixels, but dp. Dp is density depended and it may vary depending on the physical screen.
Unit Units / physical inch Density independent Same physical size on every screen
dp ~160 yes no
I am curious about your results with this!
from fries.
Related Issues (20)
- Material design
- Outdated Documentation Ratchet Link HOT 1
- Deprecated jekyll command line in README.md - Revert 722f50d
- Project websites officially dead!? HOT 5
- swich on/off and radio button not working HOT 7
- Support for Android versions lower than 4.0 HOT 1
- Navigation logic with back button HOT 3
- Display crash losing css + js
- when we will meet navigation drawer HOT 2
- Onclick function won't run on buttons, and anchor tags. HOT 1
- Examples+Site examples do not work. HOT 1
- Keyboard overlap on field (textbox) of form. HOT 4
- Load next page when clicking HOT 2
- broken on android 4.4.2 ? HOT 2
- Checkboxes in lists HOT 1
- Form elements are not working HOT 3
- Fries as a chrome app HOT 1
- Merged theme branches and examples HOT 9
- Sliding between tabs
- Switching between tabs not working HOT 2
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 fries.