0

Hopefully this is in the correct place!

So I've designed a few app screens in sketch and have come to try and code them using PhoneGap but can't seem to get my head around sizes etc..

This is one of the problems I'm having. In Sketch I have got a text input box that is apparently 60px high (I am using the iPhone 6 Artboard (375px wide)). I took this height of 60px and put it in to my CSS but it is absolutely huge and ends up looking nothing like the design.

What sizes and units should I be using to get an accurate representation of my Sketch app in the PhoneGap app.

Thanks

Improve this question
2
  • I think you need to add the meta viewport tag if it's not already included... See this answer.
    – Greg Venech
    Commented May 27, 2016 at 18:52
  • Look online to find standard screen sizes. If a sized object looks differently sized in another program than you have a resolution conflict. Get your programs at the same resolution (72px per inch, for example) and this should avoid conflict. Design everything to the pixel then specify sizes in CSS to the pixel and you can control it all down to the pixel.
    – Webster
    Commented Aug 22, 2017 at 20:10

1 Answer 1

Reset to default
0

PhoneGap and Cordova use CSS pixels, which means 1x1 CSS pixel on a retina iPhone is drawn with 2x2 real device pixels. iPhone 6S sizes are a bit trickier to understand. About those later.

The common recommendation seems to be on designing for 1x screens in Sketch and then scaling on export appropriately. This would mean 320px wide artboards for older iPhones, and then scaling from there to 640px for 2x retina 5S and such.

Just remember to have all your bitmaps in a high enough resolution so that you do not lose details.

Regarding iPhone sizes, this link might help a bit: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

Improve this answer
1
  • A 375px width artboard for an iPhone 6 means the OP is designing at 1×. iPhone 6 = 375×667px at 1×. The actual device display is 750×1334.
    – Marc Edwards
    Commented Mar 24, 2017 at 0:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.