I used to have problems with the mobile thing when creating mobile websites. Indeed, if you want your mobile website to look good on devices, you need to define a few things : viewport, icons, splashscreens… So today, I’m going to tell you exactly what you need to do to make your website mobile-ready.
All the following has been tested on iOS. Most of it should also work on Android but I couldn’t test it, so no guarantee.
To make your website behave almost like a native app, you will need to add some lines to your html files. Let’s get started with the first thing, tell the world that your app is mobile capable !
Mobile Web App Capable
This meta-tag will tell mobile Safari or any other mobile browser that your website should be display in full-screen mode.
<meta name="apple-mobile-web-app-capable" content="yes" />Viewport
You definitely want to set the viewport meta tag for your mobile website. With this, you can define how your website should look and if the user can zoom or not.
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />This line will probably give you the behavior you want. If you are looking for more information about the viewport tag, take a look at Apple Documentation or Android Documentation.
If you are targeting iPhone 5, you will have to add the following code. Without it, your website won’t be displayed correctly when accessed from the home screen.
<meta name="viewport"
content="initial-scale=1.0,user-scalable=no,maximum-scale=1"
media="(device-height: 568px)" />Topbar
Mobile websites can be saved to the home screen on iOS. If a user do so, you will have to do something about the top bar. You can control that with :
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>The options for content are default, black or black-translucent.
Home screen Icon
If your website is saved to the home screen, it will need an icon. If you don’t set one, the device will take a screenshot of your website. That usually doesn’t look so good ! You actually have to define multiple icons, the right one will be picked depending on the device resolution.
<!-- iPhone -->
<link href="icons/icon-57x57.png"
sizes="57x57" rel="apple-touch-icon">
<!-- iPhone Retina -->
<link href="icons/icon-114x114.png"
sizes="114x114"
rel="apple-touch-icon">
<!-- iPad -->
<link href="icons/icon-72x72.png"
sizes="72x72"
rel="apple-touch-icon">
<!-- iPad (Retina) -->
<link href="icons/icon-144x144.png"
sizes="144x144"
rel="apple-touch-icon">A couple of notes about this.
You could just use 2 image sizes (114x114, 144x144) and let the device resize it.
You could also just provide a png image at the root of your folder called apple-touch-icon.png or apple-touch-icon-precomposed.png and the device will pick it up.
You can either put apple-touch-icon or apple-touch-icon-precomposed in the rel attribute. With the latter, the device won’t apply any fancy effect on the icon.
Splashscreens
The last thing you can add to your mobile website is a splashscreen. That’s the screen the device will show before showing your website. Again, you need to define quite a lot of tags to fit a range of different screen sizes.
<!-- iPhone 320x460px -->
<link href="splashscreens/320x460.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iPhone Retina 640x920px -->
<link href="splashscreens/640x920.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPhone 5 640x1096px -->
<link href="splashscreens/640x1096px.png"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPad Portrait 768x1004px -->
<link href="splashscreens/768x1004.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iPad Landscape 1024x748px -->
<link href="splashscreens/1024x748.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iPad Retina Portrait 1536x2008px -->
<link href="splashscreens/1536x2008.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPad Retina Landscape 2048x1496px -->
<link href="splashscreens/ 2048x1496.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">Your website should be ready for mobile devices now !
All the code is available on Github.
