Hello
my name is
Tomomi
@girlie_machttp://lemarquis.deviantart.com/art/HTML5-Wallpaper-243682854
No SDK Required!
http://www.flickr.com/photos/archer10/4312413546/
@media handheld {
/* Some mobile-specific CSS here */
}
Only supported by:
Controlling the presentation without modifying the content itself.
Separate styles by the width of the target viewport
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
by device-width, the width of the device's screen size
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
combined with screen orientations
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}...
separate styles by device pixel ratio
window.devicePixelRatio
Device | Browser | Pixel Density |
---|---|---|
Nexus One | Android browser | 1.5 |
Galaxy Nexus | Chrome | 2.0 |
Galaxy Nexus | Opera Mobile | 2.25 |
@media only screen and (min-device-pixel-ratio: 2) {
/* some hi-res css */
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {...}
@media only screen and (min--moz-device-pixel-ratio: 1.5) {...}
@media only screen and (-o-min-device-pixel-ratio: 3/2) {...}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
...
}
Typical Screen: 96dpi (96px = 1in in CSS units)
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
...
}
.banner {
background-image: url(banner.png);
width: 320px; height: 160px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
.banner {
background-image: url(banner-2x.png);
background-size: 100%;
}
}
<img src="logo.svg" width="">
<picture width="500" height="500">
<source media="(min-width: 45em)" src="large.jpg">
<source media="(min-width: 18em)" src="med.jpg">
<source src="small.jpg">
<img src="fallback.jpg">
<p>Accessible text</p>
</picture>
pointer
- accuracy of a pointing device. none, coarse, fine. "Fat Finger"
hover
- 0 or 1For any input devices: touch, mouse, pen...
if (navigator.pointerEnabled) {
el.addEventListener('pointerdown',
startHandler, false);
el.addEventListener('pointermove', ...);
el.addEventListener('pointerup', ...);
}
Only IE10 supports so far...
if (navigator.msPointerEnabled) {
el.addEventListener('MSPointerDown', startHandler, false);
el.addEventListener('MSPointerMove', moveHandler, false);
el.addEventListener('MSPointerUp', endHandler, false);
}
<a href="tel:+14155557777">
Order Pizza Now!
</a>
<a href="sms:+14155558888?body=Hello">
Text me!
</a>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, fail);
}
function success(position) {
alert('Latitude: '+ position.coords.latitude +
', Longitude: '+ position.coords.longitude);
}
DOM events for obtaining information about the physical orientation and movement of the hosting device
Events:deviceorientation
, devicemotion
, compassneedscalibration
Try it on supported browsers: http://goo.gl/5Cj4d
WebRTC "Web Real Time Communications"
var gum = navigator.getUserMedia ||
navigator.mozGetUserMedia||navigator.webkitGetUserMedia;
navigator.getUserMedia({video: true, audio: true},
successCallback, errorCallback);
The super silly demo again: RespongeBob Web / Make Me Bob!
<!-- Current implementation (if supported) -->
<input type="file" accept="image/*" capture="camera">
<!-- Newly proposed specification -->
<input type="file" accept="image/*" capture>
var battery = navigator.battery || navigator.mozBattery;
battery.addEventListener('chargingchange', updateStatus);
function updateStatus() {
alert('Battery status: ' + battery.level * 100 + ' %');
if (battery.charging) {
alert('Battery is charging...');
}
}
Try it on Firefox Mobile: http://goo.gl/V1n6h
var vibrate = navigator.vibrate || navigator.mozVibrate;
vibrate(1000); // vibrate for 1sec
vibrate([1000, 500, 2000]);
// vibrates for 1sec, still for 0.5 seconds,
// and vibrates again for 2sec
Try it on Firefox Mobile: http://goo.gl/EWPmL
window.addEventListener('devicelight', function(e) {
alert(e.value);
});
Sensor Value | Lightning Condition | My Observation on Galaxy Nexus |
---|---|---|
< 300 lux | Dim | Indoor |
400-1000 lux | Normal | By window. Outdoor (Cloudy) |
> 1000 lux | Light | Outdoor Daylight? Can't test in foggy SF :-p |
The distance of a nearby physical object using the proximity sensor of a device.
window.addEventListener('deviceproximity', function(e) {
alert(e.value);
});