www.quietrev.com - mobile site is not usable

[amire80]

URL: http://www.quietrev.com/quiet-revolutionaries/
Browser / Version: Firefox Mobile 45.0
Operating System: Android 5.0
Problem type: Mobile site is not usable

Steps to Reproduce

1. Navigate to: http://www.quietrev.com/quiet-revolutionaries/
2. The desktop site looks much better than the mobile site .

Expected Behavior: The other way around .

Actual Behavior:

[karlcow]

@amire80 Thanks for the report.

Probably an issue with the viewport and resizing the width of the window. It fits nicely in Opera/Chrome Blink.

.wrap {
    max-width: 1183px;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 41px;
    min-width: 680px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Removing the min-width makes it fit but also destroys the layout.
I wonder if the the JavaScript is setting the style dynamically.

Need more investigation.

[hallvors]

The issue here is a META VIEWPORT tag that contains width=device-width, initial-scale=1.0. Notice how it gives two conflicting instructions about how to scale the page? Are we supposed to obey "width=device-width" or "scale=1.0"? Firefox ends up doing the latter in practise if not on purpose, and it turns out what the site really wanted to apply was width=device-width.

[hallvors]

Here are some possible contact points:
Google+: https://plus.google.com/u/0/115035892556753829264/
Twitter: https://twitter.com/livequiet
Linkedin: https://www.linkedin.com/company/quiet-revolution-llc
Contactlink: http://www.quietrev.com/contact-susan/
Facebook: https://m.facebook.com/QuietRev

[amire80]

@hallvors thanks for the links.

I wrote them and they replied: https://twitter.com/aharoni/status/662294432943837184

Waiting patiently for the fix now :)

[hallvors]

Thanks for contacting them, @amire80! 👍

[karlcow]

ok this was not really fixed. They now have

<meta id="viewport" name="viewport" content="width=680, user-scalable=no">

The interesting thing is that Firefox does not behave the same than Chrome (Blink) or Safari (WebKit)

ping @miketaylr
Maybe another instance of https://bugzilla.mozilla.org/show_bug.cgi?id=617034
It's a kind of auto-zoom basically to fit the viewport.

I would say that we need to fix this behavior and/or report to the CSS WG.

[staktrace]

I think the viewport they are using now is actually a good one, given their content has min-width: 680px. I think in this case firefox is not scaling the content to fit when it should be. Bug 617034 is very general; if you file a new bug for this issue I can take a look.

[staktrace]

Actually we have https://bugzilla.mozilla.org/show_bug.cgi?id=1187182 for this already, I'm reopening that.

[karlcow]

And now the viewport is

<meta id="viewport" name="viewport" content="width=680">

I'm not sure to understand why they don't just simply do

<meta id="viewport" name="viewport" content="width=device-width">

When I tried to change manually the value, it changed back right away to 680px.

So I decided to check through the debugger and found:
https://quietrev.leadpages.net/leadbox-875.js

  // Utilities //

  function getSize(callback) {
    var body = window.document.body,
      doc = window.document.documentElement,
      documentWidth = Math.max(body.scrollWidth, doc.scrollWidth,
        body.offsetWidth, doc.offsetWidth,
        doc.clientWidth),
      documentHeight = Math.max(body.scrollHeight, doc.scrollHeight,
        body.offsetHeight, doc.offsetHeight,
        doc.clientHeight),
      viewportWidth = window.innerWidth || doc.clientWidth ||
      body.clientWidth,
      viewportHeight = window.innerHeight || doc.clientWidth ||
      body.clientWidth;

    // FB.Canvas may be defined because the host page is using the FB
    // JS API, but it will never trigger the callback because the page
    // is not hosted inside Facebook. As such, we give it 100ms to
    // trigger the callback, and if it doesn't, we'll just use the
    // default (non-facebook) values
    var workaround = window.setTimeout(function() {
      workaround = null;
      callback(documentWidth, documentHeight, viewportWidth,
        viewportHeight);
    }, 100);
    if (typeof FB != "undefined" && FB.Canvas) {
      FB.Canvas.getPageInfo(function(info) {
        if (workaround == null)
          return; // too late
        window.clearTimeout(workaround);
        workaround = null;

        if (info.clientWidth - info.offsetLeft < viewportWidth)
          viewportWidth = info.clientWidth - info.offsetLeft;
        if (info.clientHeight - info.offsetTop < viewportHeight)
          viewportHeight = info.clientHeight - info.offsetTop;
        callback(documentWidth, documentHeight, viewportWidth,
          viewportHeight);
      });
    }
  }

And in http://d1xenuxjgcz4dx.cloudfront.net/wp-content/themes/quietrevolution/js/script.js?v=8&ver=4.5.3

  orientation_change: function () {
    jQuery('#viewport').attr('content', 'width=device-width');
    this.resize();
  },
  get_orientation: function () {
    if (typeof window.orientation == 'undefined')
    return this.ORIENTATION_PORTRAIT;
    var o = window.orientation;
    if (o == 0 || o == 180 || o == - 180)
    return this.ORIENTATION_PORTRAIT;
     else
    return this.ORIENTATION_LANDSCAPE;
  },
  resize: function () {
    var width = jQuery(window).width();
    var orientation = this.get_orientation();
    var isiPad = navigator.userAgent.match(/iPad/i) != null;
    if (isiPad) {
      width = 999;
    }
    var use_device_width = true;
    for (var trigger_width in this.triggers[orientation]) {
      if (width < trigger_width) {
        jQuery('#viewport').attr('content', 'width=' + this.triggers[orientation][trigger_width]);
        use_device_width = false;
        break;
      }
    }
    if (use_device_width) {
      jQuery('#viewport').attr('content', 'width=device-width');
    }

Which is a lot of weirdness to adjust to the screen size.

At least, anyway this is fixed.