5 meta tags for making your website into a iOS Web App
来源:互联网 发布:四维彩超的数据看性别 编辑:程序博客网 时间:2024/05/16 14:52
1. Click on the launch arrow in Safari
2. From the drop down menu select “Add to Home Screen”
3. Don’t forget to give your Web App a name
4. Once done your Web App should look like this:
Viewport
Viewport changes the logical size of the viewable area on the iOS device.
1
<
meta
name
=
"viewport"
content
=
"width = device-width, initial-scale = 2.3, user-scalable = yes"
/>
The break down
Width = The width of the viewable area. Default is 980 pixels.
Initial-scale = The Scalable area of the viewable area.
User-Scalable = “yes” to allow the user to zoom in and out of your Website and “no” to turn it off.
2. Remove Toolbars and make the Website iOS capable
1
<
meta
name
=
"apple-mobile-web-app-capable"
content
=
"yes"
>
The Breakdown
Removing the Toolbars and making the Website iOS capable simply removes Safari’s toolbars and makes your site fullscreen.
3. Change the App Status Bar colour
1
<
meta
name
=
"apple-mobile-web-app-status-bar-style"
content
=
"black"
/>
The Breakdown
This changes the colour of the iOS’s status bar there are three settings you can use:
- default
- black
- black-translucent
Note: If you use default or black the web page content will appear below the iOS’s status bar, to give your website more real estate it’s recommended using black-translucent as it makes the website appear behind the Status bar.
4. Application Icon
1
<
link
rel
=
"apple-touch-icon"
href
=
"img/app-icon.png"
/>
The Breakdown
This is what the user will see when they add your app to their home screen. You can specify three different types of icons depending on what device the user is using.
- iPod Touch, iPhone and iPad
1
<
link
rel
=
"apple-touch-icon"
href
=
"touch-icon-iphone.png"
/>
- iPhone
1
<
link
rel
=
"apple-touch-icon"
sizes
=
"114x114"
href
=
"touch-icon-iphone4.png"
/>
- iPad
1
<
link
rel
=
"apple-touch-icon"
sizes
=
"72x72"
href
=
"touch-icon-ipad.png"
/>
5. Splash Screen
1
<
link
rel
=
"apple-touch-startup-image"
href
=
"img/splash-screen.png"
/>
The Breakdown
This will add a Splash Screen to your Web App. Below are the sizes you’ll need for both iPad and iPhone/iPod Touch, these include the status bar area as well.
- iPad Landscape – 1024 x 748
1
<
link
rel
=
"apple-touch-startup-image"
sizes
=
"1024x748"
href
=
"img/splash-screen-1024x748.png"
/>
- iPad Portrait – 768 x 1004
1
<
link
rel
=
"apple-touch-startup-image"
sizes
=
"768x1004"
href
=
"img/splash-screen-768x1004.png"
/>
- iPhone/iPod Touch Portrait – 320 x 480 (standard resolution)
1
<
link
rel
=
"apple-touch-startup-image"
href
=
"img/splash-screen-320x460.png"
/>
- iPhone/iPod Touch Portrait – 640 x 960 pixels (high-resolution)
1
<
link
rel
=
"apple-touch-startup-image"
sizes
=
"640x960"
href
=
"img/splash-screen-640x960.png"
/>
- 5 meta tags for making your website into a iOS Web App
- Top Ten Tips for making your website accessible
- Core Text Tutorial for iOS: Making a Magazine App
- Core Text Tutorial for iOS: Making a Magazine App(中文)
- Core Text Tutorial for iOS: Making a Magazine App
- Core Text Tutorial for iOS: Making a Magazine App(中文)
- Core Text Tutorial for iOS: Making a Magazine App
- Core Text Tutorial for iOS: Making a Magazine App
- Core Text Tutorial for iOS: Making a Magazine App
- Core Text Tutorial for iOS : Making a Magazine App 翻译
- Making a System Tray Icon for your application
- CSS-An Overview、Design a Button for Your Website
- android-Making Your App Content Searchable by Google,Specifying App Content for Indexing
- People come into your life for a reason
- How to Turn Your Mac Into a Web Server
- Check for updates from your iOS app
- Create Every iOS Icon For Your App With a Photoshop Script
- 【wordpress】Embedding Maps into a Website
- c#简单贪吃蛇游戏的思想
- Android DigitalClock自定义日期输出格式
- 如何解决iOS模拟器调试时不能出现iPad/iPhone Simulator
- Linux 指令1
- MIB Lotus worknote
- 5 meta tags for making your website into a iOS Web App
- 命令模式(Command Pattern)
- 第十五周实验报告2
- 日志工具类v1.0
- uva 10082 - WERTYU
- 十五周实验3.1
- Ruby的require
- 十五周任务一
- Linux下常见问题及解决方案