I have finally rewritten my MoonPhase app to be a UWP app. This allows me to write the code once and have it on a Windows 10 phone as well as a standard Windows 10 desktop or tablet.

With this app, there are three main interfaces that show you the phases of the moon; a day view, week view and a month view. As the phone interface is somewhat constrained, I decided to only show the day view on these devices and allow the user to move back and forward in time to get to other dates.

Phone view

image

Desktop view

image

So in the code I had to detect the screen size of the current device, this can be done in the app.onactivated event of the WinJS framework.

getCurrentView() will get the device view object where we can then query it for the visibleBounds properties. I am using a device height of 800 which covers phones in the 5inch range such as Lumia 650.

Then a conditional is used to render either the day.html view or the week.html view for all other devices.

Also as I don’t want phone users to see the buttons to navigate to week or month views, I simply use jQuery to get all the buttons from the toolbar that have a certain class and remove them.

The app can be found in the Windows app store here.

Happy coding.