Coast by Opera for iPad - Opera Browser | UA - User Agents
Standards Based Development
Coast rawks Apple's UIWebView embedded in iOS, based on WebKit; Coast by Opera for iPad on the iTunes App Store.
Coast Icons
Coast's icons are crucial for your application(s), as it treats websites as applications. Generally, icon references and domain names are used to group pages into the same web application on Coast's home screen or in search results, so you should include the same icons and icon-reference markup for pages that you want grouped together.
Coast prefers a web-app image size of 228x228(px) for optimum image fidelity. The link / element markup below shows how to denote an icon for Coast:
Coast's icon link / will not conflict with any existing icons/tiles already assigned to Windows 8, Android, or iOS.
Note: should a 228x228 icon not be supplied, Coast uses heuristics to derive the icon.
recommended queries for iPads, allowing you to adjust elements for Retina and non-Retina displays:
iPad 2 and iPad Mini (non-Retina)
@media only screen and (min-device-width:768px) and (max-device-width:1024px)
and (-webkit-min-device-pixel-ratio:1) {
/* Insert styles */
}
iPad 3 and iPad 4 (Retina)
@media only screen and (min-device-width:768px) and (max-device-width:1024px)
and (-webkit-min-device-pixel-ratio:2) {
/* Insert styles */
}
Coast Media Queries According to Screen Orientation
iPad 2 and iPad Mini (non-Retina)
@media only screen and (min-device-width:768px) and (max-device-width:1024px)
and (-webkit-min-device-pixel-ratio:1) {
/* Insert styles */
}
iPad 3 and iPad 4 (Retina)
@media only screen and (min-device-width:768px) and (max-device-width:1024px)
and (-webkit-min-device-pixel-ratio:2) {
/* Insert styles */
}
For example, you can specify styles for an iPad Mini device in landscape orientation by adding this @media rule to your css:
@media only screen and (min-device-width:768px) and (max-device-width:1024px)
and (-webkit-min-device-pixel-ratio:1) and (orientation:landscape) {
/* Insert styles */
}
Or, for an iPad 4, in portrait orientation:
@media only screen and (min-device-width:768px) and (max-device-width:1024px)
and (-webkit-min-device-pixel-ratio:2) and (orientation:portrait) {
/* Insert styles */
}
Alternatively, you can load a separate CSS entirely for each orientation. For the best performance, we still recommend using @media in a minified CSS. But, for development and testing, you can load different stylesheets by adding an orientation descriptor to your linked resources.
Here's an example of loading two different styles in the head element:
<!--Styles for iPad 2/iPad Mini, in portrait orientation-->
<link rel="stylesheet" media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1) and (orientation:portrait)" href="lo-res-portrait.css" />
<!--Styles for iPad 3/4, in landscape orientation-->
<link rel="stylesheet" media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:2) and (orientation:landscape)" href="hi-res-landscape.css" />
Retina Images for Coast (Serve 'em up!)
Coast in iOS 7+ supports the srcset attribute for the img / element, permitting variant definitions of the same image for serving up different resolutions for content images.
To serve up higher-resolution image(s) for Retina displays, without penalizing loading times for lower-density displays (iPad 2 and iPad Mini, for example) mark up img / element to change the src="" when the browsers detects a higher pixel density, like below:
<img src="image.jpg" srcset="retina.jpg 2x" />
The markup above says "use the standard image for low-resolution displays, and use this high-resolution image ("retina.jpg") for devices with a 2x pixel density". srcset="" can also serve up different images for viewport sizes as well, simply by setting optional width and height descriptors for multiple srcset="" attributes. w3c srcset="" attribute standards document reference.
Avoiding Coast Icon, aka Icon Default Stylee
Should you choose to use an existing icon for use in Coast (Why?!?!?! Don't! It takes x-seconds to create a new size from an existing icon's template. But you already knew that shit!) the following markup will be sought out to find an icon for your web documents. The largest icon found will be then set to your Coast icon.
<meta name="msapplication-TileImage" content="$URL" />
<meta name="msapplication-TileColor" content="$COLOR" />
<link rel="apple-touch-icon" href="$URL" sizes="$AxB" />
<link rel="apple-touch-icon-precomposed" href="$URL" sizes="$AxB" />
<link rel="shortcut icon" href="$URL" />
<link rel="icon" href="$URL" />
meta name="msapplication-TileImage" / and meta name="msapplication-TileColor" / are used simultaneously to produce an icon's image; if either is missing, Coast will seek out other icon references to produce the web-app icon image.
Coast determines an icon's border-color via its dominant color.
More Coast Icon Avoidance
Should none of the above markup exist in your application (I guess in cases were you totally suck) Coast will search for common icon names in root, for example: yourmom.com/favicon.ico or yourmom.com/apple-touch-icon.png.
If Coast cannot find an icon in root, your site's web-app icon image will be created automagically by assigning a color and adding text, which will be remembered until it detects that an icon has been added into the site's markup.