When using a smartphone, Montreal Gazette sends its users to one of its two mobile Websites: touch or mobile. Well not all smartphone users, Opera, Firefox OS and Firefox Android browsers were not redirected to the mobile ones. They stay on the desktop content.
When this is happening, we often test in advance before contacting. The rule is that if we ask the company to send the mobile site, how does it fail? What are the things which have to be fixed. So when I tested the touch Web site on Firefox OS, I was surprised to see it failing in some fashion. It looked like the viewport was wrong or something related to the screen size. Would it be mediaqueries?
First, mobile smartphones are redirected to the /mobile/ then to access the /touch/ version you have to be AppleWebKit and have Mobile in your User Agent string, but not BlackBerry 9780. Let me sing "Oh! Canada". Ah no sorry that was two days ago.
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;
}
It was surprising because in the touch version of the CSS, there are styles for Mozilla, Opera and all. Still they were some mistakes in the mediaqueries 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){
.ui-icon-plus,.ui-icon-minus,.ui-icon-delete,.ui-icon-arrow-r,.ui-icon-arrow-l,.ui-icon-arrow-u,.ui-icon-arrow-d,.ui-icon-check,.ui-icon-gear,.ui-icon-refresh,.ui-icon-forward,.ui-icon-back,.ui-icon-grid,.ui-icon-star,.ui-icon-alert,.ui-icon-info,.ui-icon-home,.ui-icon-search,.ui-icon-searchfield:after,.ui-icon-checkbox-off,.ui-icon-checkbox-on,.ui-icon-radio-off,.ui-icon-radio-on{
background-image:url(images/icons-36-white.png);
-moz-background-size:776px 18px;
-o-background-size:776px 18px;
-webkit-background-size:776px 18px;
background-size:776px 18px;
}
Did you spot it? Yeah min--moz-device-pixel-ratio:1.5, someone at lunch felt that beer was long overdue to be able to swallow a poutine. No pun. I LOVE poutine. But that was not the issue. The issue was that in the console I had 14 times, the message:
Expected ',' in media list but found 'and('.
Huh? What could be wrong? So I made a test with the different mediaqueries rules.
p {background-color: #fff;}
@media screen and (max-width:600px) and (min-width: 501px) {
p {background-color: yellow;}
}
@media screen and(max-width:500px){
p {background-color: pink;}
}
Your eagle eye has noticed the difference in between and( and and (. (and good luck to parse this sentence). I added a space in between the and and the ( parenthesis. The initial testing showed that it was working in Safari (Yeah!) and failing in Firefox (Booh!). I was so happy that I opened a bug thinking I had found a parsing bug in Firefox CSS parser. Then further tests, it is failing in Opera, in IE11, and in Chrome…
Ah change of strategy! This is failing everywhere but Safari. Let me find the relevant bug at Apple.
What happened I guess is that someone when creating the Web site has tested on his/her iPhone device and it worked. Then later own, someone from management or business accessed with a blackberry and it failed. It might be why they put the JavaScript code.
Three things to do:
- ask the Web developer of La Gazette to fix the CSS. (ONGOING)
- ask WebKit developers to fix CSS Parsing (ONGOING)
- If you do not have spaces after the
andin mediaqueries, give it space now!
Otsukare.