Code Monkey home page Code Monkey logo

Comments (8)

teusink avatar teusink commented on May 12, 2024

I cannot confirm the pixels, but I do see indeed differences yes, like you mention. I will lookin to it this week.

from fries.

jaunesarmiento avatar jaunesarmiento commented on May 12, 2024

Cool, thanks @teusinkorg!

from fries.

teusink avatar teusink commented on May 12, 2024

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.

jaunesarmiento avatar jaunesarmiento commented on May 12, 2024

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.

teusink avatar teusink commented on May 12, 2024

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.

jaunesarmiento avatar jaunesarmiento commented on May 12, 2024

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.

teusink avatar teusink commented on May 12, 2024

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.

teusink avatar teusink commented on May 12, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.