Let's start simple with the size of the device
we're running on. Right now I have relatively big emulators here and I will now change this and I'll
change it on Android
but of course we could do the same on iOS. Here on Android and I will create a new virtual device which
is actually way smaller
and for that in my list of images here when creating a new virtual device, I'll pick a super small one
like this
3.7 inch phone here.
Now one important side note, you might be thinking that not many users use such small devices anymore
but that really depends on the market you're targeting.
If you're targeting primarily the US, well then maybe you don't really need to optimize your app for
small devices
but if you're targeting the whole world or maybe some emerging countries, well then that looks different,
so you definitely want to know what your target is and which devices your target users use.
So I will create this device here, a relatively small one, simply click next here, pick Android pie in
my case here as the Android version and then finish this
and now this will create this virtual device and now I will also launch it.
So now this is booting up, on my second screen I'll bring it back here in a second,
I'll close this Android device for the moment,
this bigger one and here's my smaller one booting up.
So let me also increase this a little bit and this just increases the size in which we can see it, not
the dimension of the phone
and as you can already tell, this is definitely a smaller device with less pixels available both on the
on the height and the width.
So now with that, I already am back in my project,
this is the project we worked on in the last sections and you find it attached in case you didn't follow
along here and I already started my expo server with npm start
and by hitting a, I now install expo and then this app here on this emulator.
So let's wait for this to finish and launch and here's my app and we can already tell that our app is
certainly not optimized for smaller screens, here
the buttons are not really positioned that well so something's wrong there
and now let's see how it works when we start the game.
Well then here this seems to work, if I click Start Game, well that certainly is working here but
we have an issue on our starting screen and maybe here, we want to change some sizes as well, maybe we want
to remove the margin or reduce the margin we have between this number and this box with our inputs here,
maybe want to increase the width of our boxes down there, our log of the rounds we had have,
so maybe we want to change something there and when the game is over, maybe we want to shrink the size
of the image a little bit but because this is super large and it actually has one huge disadvantage
because since this page isn't scrollable, I can't reached the new game button,
so that's a real game breaker,
it's really breaking our game, this distance here also is a bit too big between the image and the
text.
There's a bunch of work to do just because we're on a smaller device,
this doesn't even respect the fact that our users might rotate the device which by the way at the moment
is disabled anyway and so I'll come back to this and how to enable it in a second.
So let's start working on that and let's learn how we can actually calculate our space we're distributing,
the sizes we use in a more dynamic way and make sure that our app looks good on all kinds of devices.