Site: http://www.montrealgazette.com/ montrealgazette.com sends desktop content to Firefox OS, Firefox Android and Opera Mobile :: Steps To Reproduce 1. With Firefox on Android (or Firefox OS, or Opera Mobile Presto) 2. Go to http://www.montrealgazette.com/ :: Expected Result Receive a mobile friendly content like it is happening for UCWeb or Android Stock Browser :: Actual Result Received the Desktop Content. :: Additional Information Software Version: 1.2 Device Information: ZTE roamer2 Reporter's User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:26.0) Gecko/20100101 Firefox/26.0

Server side detection. They also could save some RTTs by redirecting to the good URIs directly and/or serving content for index.html on / instead of redirecting and this for all devices. # Firefox OS, Android, Opera Presto (summarized) → http --print hH GET http://www.montrealgazette.com/ "User-Agent: $FOSUA" GET / HTTP/1.1 User-Agent: Mozilla/5.0 (Mobile; rv:18.0) Gecko/18.0 Firefox/18.0 HTTP/1.1 301 Moved Permanently Location: http://www.montrealgazette.com/index.html → http --print hH GET http://www.montrealgazette.com/index.html "User-Agent: $FOSUA" GET /index.html HTTP/1.1 User-Agent: Mozilla/5.0 (Mobile; rv:18.0) Gecko/18.0 Firefox/18.0 HTTP/1.1 200 OK # iOS Safari (summarized) http --print hH GET http://www.montrealgazette.com/index.html "User-Agent: $APHUA" GET /index.html HTTP/1.1 User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3 HTTP/1.1 302 Moved Temporarily Location: /mobile/ → http --print hH GET http://www.montrealgazette.com/mobile/ "User-Agent: $APHUA" GET /mobile/ HTTP/1.1 User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3 HTTP/1.1 301 Moved Permanently Location: http://www.montrealgazette.com/mobile/index.html → http --print hH GET http://www.montrealgazette.com/mobile/index.html "User-Agent: $APHUA" GET /mobile/index.html HTTP/1.1 User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3 HTTP/1.1 200 OK

Note that the CSS has a few issues on mediaqueries which should be fixed, such as @media only screen and(-webkit-min-device-pixel-ratio:1.5), only screen and(min--moz-device-pixel-ratio:1.5), only screen and(min-resolution:240dpi){ } The issue comes notably from "and(", it is a parse error in Opera(blink) and in Firefox. It is probably a bug in Firefox but it would be better to fix it as "and (". The mediaqueries are ignored in Opera and Firefox. It is working in Safari. There is also an issue with things like "min--moz" which should be "-moz-min-" Apart of that, PostMedia Web sites including the gazette should send Firefox OS and others to the touch version.

The syntax "and(" really needs to be fixed. This is a bug in Safari that it is accepted, it should not. All other browsers send an error: Chrome, Firefox, Opera and IE. See https://bugs.webkit.org/show_bug.cgi?id=98303#c4 for context.

btw there are two mobile (at least) Web sites. http://www.montrealgazette.com/touch/ http://www.montrealgazette.com/mobile/

On we can find http://www.montrealgazette.com/mobile/ <script> if (navigator.userAgent.match(/AppleWebKit/i) && navigator.userAgent.match(/Mobile/i) && !(navigator.userAgent.match(/BlackBerry 9780/i))) { // remove '/mobile' from the start of the path and add '/touch' var path = "/touch" + location.pathname.substr(7, location.pathname.length); document.location = path + location.search; } </script>

This seems fixed now!

The test is failing. "962922": { "url": "http://www.montrealgazette.com/", "steps": [ "function (){return hasViewportMeta() && mobileLinkOrScriptUrl();}" ], "ua": "FirefoxOS", "title": "montrealgazette.com sends desktop content to Firefox OS, Firefox Android and Opera Mobile" }, The site switched to a responsive site. It's not going to Mobile anymore. There is still <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> Maybe this script in the markup is a better way of detecting: <script type='text/javascript'> /* <![CDATA[ */ var Postmedia = {"adConfig":{"site":"mg.m","msite":"mg.m","networkId":3081,"keys":{"ck":"index","imp":"index","nk":"print","page":"index","pr":"mg"},"zone":"index"},"Urls":{"home_url":"http:\/\/montrealgazette.com","stylesheet_directory_uri":"http:\/\/s0.wp.com\/wp-content\/themes\/vip\/postmedia-montrealgazette","ajaxurl":"http:\/\/montrealgazette.com\/wp-admin\/admin-ajax.php"},"Properties":{"domain":"","userAgents":["mozilla","msie","webkit","ipad"],"mobileAgents":["iphone","ipod","android"],"isMobile":true,"isIpad":false,"isModal":false},"Facebook":{"pageId":"273805206181","appId":"262483350536461","mobileId":"mg.m"}}; /* ]]> */ </script>