I returned to college yesterday to compare the progress I had made with some colleagues. One friend suggested one of us testing our web app out on web space so that it was live. Upon doing so we saw that the design had stretched, as it does when you preview it locally in a web application. We thought it was odd, as we had designed our app with the starting template for a mobile device, yet it is displaying similarly to the full size website preview. We searched for a similar error on Google as we were sure it would be a common issue; the mobile web page being stretched when it should be the actual design and not need to be stretched at all.
We found the issue, and the fix was to add this line of code to the head of the .html file:
<meta name="viewport" content="width=device-width"/>
This basically tells the website to change the viewport resolution depending on the device width, which is what I’d have assumed it would do automatically. Everything requires of code to take effect; nothing will appear automatically. Probably something important to note about coding.
This then got me thinking more about what I could do to customize the web app. I did some research and found two features that I could include which would be a nice finishing touch;
- removing the top search bar – entering full screen
- creating a custom icon when you “add to home screen” (essentially mimicking the app style of opening)
These are both easy to include; requiring extra code to be placed in the head similarly to the previous function explained above.
To add a custom icon for if a user decides to save the webpage as an app icon on their iphone, the code simply links an image to the code for the device;
<link rel="apple-touch-icon" href="/custom_icon.png"/>
It’s also possible to upload different sized icons all linked to the same <link rel>, given that the iPhone/Touch and iPad will have different sized icons.