| * |
TAGs |
WHAT |
More |
| |
Test Pages |
- screen-test.html
- Graphic rulers anchored to top & btm.
- Browser Behavior
- Mobile Safari,Chrome: Browser bars stay if no verticle scrolling.
|
|
| |
Browsers |
- Mobile
- Safari
- Chrome
- Firefox
- Coast
- Silk
- Opera
- Desktop
- IE8,9,10,11,
- Chrome
- Safari
- Firefox
- Opera
- http://gs.statcounter.com
- http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
|
|
| |
Top Websites |
- http://en.wikipedia.org/wiki/List_of_most_popular_websites
|
|
| |
Test Websites |
- Popular US
- https://www.google.com/
- http://news.google.com/
- http://www.bbc.com/
- http://www.cnn.com/
- http://www.huffingtonpost.com/
- yahoo.com
- http://www.amazon.com
- Buzzfeed.com
- http://en.wikipedia.org/wiki/Website
- Popular Asian
- tmall.com
- taobao.com
- http://www.sina.com.cn/
- Dev
- http://foundation.zurb.com/
|
|
| |
Web App
Fundemental |
- <head>
- <title>Time</title>
- Icon title. Keep it short.
- <meta name="viewport" content="width=device-width,initial-scale=1" />
- Set viewport scale. I think 1 is best.
- <link rel="apple-touch-icon-precomposed" href="img/icon.png"/>
- iOS: Desktop Icon 114x114px else Icon is a screen cap.
- <link rel="apple-touch-startup-image" href="img/splash.png" />
- iOS: Splash Screen 320x460px
- <meta name="apple-mobile-web-app-capable" content="yes" />
- iOS: Sets full screen mode. Removes tool and menu bars.
- To work, must exist when user saves page as web app.
- <meta name="mobile-web-app-capable" content="yes">
- Android.Chrome: Set full screen.
- <meta name="apple-mobile-web-app-status-bar-style" content="default" />
- iOS: Top status bar. content options: default,black,black-translucent
- No effect unless full screen mode.
- Notes
- If not prepared to be offline, app becomes 404.
- <meta> tags apply to iOS.
- Seems to reload when App is closed and reopened.
- Resources
- vs Native App
|
|
| |
Web App
Advanced |
|
|
| |
Mobile Tips |
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|