Use WebKit to create websites and mobile web apps. WebKit-based browsers, such as Safari and Chrome, are rapidly expanding their audiences and market share. These handy guidelines will help you develop applications that work with these products.
>
>
Common WebKit Browsers
Every web browser has a browser engine, such as WebKit, at its core. This table lists the most common web browser engines, along with the web browsers that use them. Just three or four browser engines power the vast majority of web browsers in use today. WebKit-specific browsers can improve your performance.
| Browser | Engine |
|---|---|
| Internet Explorer | Trident |
| Firefox | Gecko |
| Safari | WebKit |
| Chrome | WebKit |
| Arora | WebKit |
| Midori | WebKit |
| OmniWeb | WebKit |
| Shiira | WebKit |
| Epiphany | WebKit |
| iCab | WebKit |
| SRWare Iron | WebKit |
| Konqueror | KHTML |
| NetSurf | NetSurf |
| Novell Evolution | GtkHTML |
| Opera | Presto |
>
>
>
Maximizing WebKit Mobile
If you're creating a website that will be viewed in a WebKit-powered mobile device, follow these rules. A few simple steps will make your pages fast and robust, however they're viewed.
Use the HTML5 doctype.
<!DOCTYPE html>
Optimize the mobile viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Use a fluid layout with a minimum width of 320 pixels.
#page-wrapper {
background: white;
min-width: 320px;
max-width: 1260px;
margin: 10px auto;
}Make clickable buttons touch-friendly.
Apple recommends a size of at least 44 pixels x 44 pixels.
Set custom home screen icons.
For iPhone 4 with high-resolution Retina display:
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="img/h/apple-touch-icon.png">For first-generation iPad:
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="img/m/apple-touch-icon.png">For non-Retina iPhone, iPod Touch, and Android 2.1+ devices:
<link rel="apple-touch-icon-precomposed"
href="img/l/apple-touch-icon-precomposed.png">For Nokia devices:
<link rel="shortcut icon" href="img/l/apple-touch-icon.png">
Configure iOS Web app settings.
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style"
content="black-translucent">
<link rel="apple-touch-startup-image" href="img/l/splash.png">Optimize your images.
Use alternatives to bitmap graphics, such as CSS3 or SVG, whenever possible.
Don't use mouse-over effects.
If your site navigation depends on hovering over a menu to see the submenu, the site will be unusable on touch screens.
Minimize JavaScript with Closure (http://closure-compiler.appspot.com/home).
Turn this:
// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name default.js
// ==/ClosureCompiler==
// ADD YOUR CODE HERE
function hello(name) {
alert('Hello, ' + name);
}
hello('New user');Into this:
function hello(a){alert("Hello, "+a)}hello("New user");Use the application cache. Not only will it make your app usable in offline mode, it will also improve performance.
<html manifest="myapp.appcache">
>
>
dummies
Source:http://www.dummies.com/how-to/content/webkit-for-dummies-cheat-sheet.html
No comments:
Post a Comment