Lawrence Mandel, Mozilla (lmandel@mozilla.com)
Lawrence Mandel
lmandel@mozilla.com
@mmmandel
Firefox for Android:
Mozilla/5.0 (Android; Mobile; rv:20.0) Gecko/20.0 Firefox/20.0
iPhone:
Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25
Android:
Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19
Avoid UA detection!
var v = document.createElement("video");
if(v.canPlayType) {
var webm = v.canPlayType('video/webm');
var h264 = v.canPlayType('video/mp4;
codecs="avc1.42E01E, mp4a.40.2"');}
<link href="site.css" type="text/css" media="screen
and (max-device-width: 480px)" rel="stylesheet"/>
@media screen and (max-width:480px) {
…
}
Mobi
for mobile devicesTablet
or iPad
or Touch
for tablet based devicesFirefox for Android:
Mozilla/5.0 (Android; Mobile; rv:20.0) Gecko/20.0 Firefox/20.0
iPhone:
Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25
Android:
Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19
BlackBerry:
Mozilla/5.0 (BB10; DeviceModel) AppleWebKit/537.10+ (KHTML, like Gecko) Version/BBVersion# Mobile Safari/537.10+
Windows Phone:
Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)
Opera:
Opera/9.80 (Android 4.0.4; Linux; Opera Mobi/ADR-1210081231) Presto/2.11.355 Version/12.10
-moz-transition:width 2s;
-webkit-transition:width 2s;
-o-transition:width 2s;
transition:width 2s;
Avoid browser specific property/feature usage!
Lots of broken sites out there. We need your help.
Lawrence Mandel
lmandel@mozilla.com
@mmmandel
http://lmandel.github.com/buildmobileweb