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

  • I think you need to add the meta viewport tag if it's not already included... See this answer. – Skip Jack May 27 '16 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 Aug 22 '17 at 20:10
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

  • 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 Mar 24 '17 at 0:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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