How to reset Disqus width on mobile orientation change

Question

I have an html page, I am using twitter bootstrap for a responsive layout, and I am also using Disqus for comments. When I initially load the page, from my mobile phone (iPhone 5) everything loads fine and Disqus is sized in it's container (basically the full width of the screen). When I rotate the phone to landscape and back, no problem with the responsive design, it resizes and behaves exactly as I want it to. The problem is that the Disqus iframe does not resize on my mobile phone after the initial page load.

I am wondering if there is a good way for me to help Disqus resize it's self.

Answer 1

Do a Disqus reset on page resize ;). http://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites

This is my code:

<script type="text/javascript">
  var reset_disqus = function(){
    DISQUS.reset({
      reload: true,
      config: function () {  
        this.page.identifier = '{{ article.url }}';
        this.page.url = '{{ SITEURL }}/#!{{ article.url }}';
        this.page.title = "{{ article.title }}";
      }
    });
  };
  var disqus_shortname = '{{ DISQUS_SITENAME }}';
  var disqus_identifier = '{{ article.url }}';
  var disqus_title = '{{ article.title }}';
  var disqus_url = '{{ SITEURL }}/{{ article.url }}';
  (function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
  window.onresize = function() { reset_disqus(); };
</script>

Answer 2

On this Disqus help page (also linked to in accepted answer):

Home › Developers › Using Disqus on AJAX sites

... there's this note:

See the DISQUS API Recipes repo on Github for an example DISQUS.reset recipe.

Having visited that repo, I decided to ask this question:

disqus / DISQUS-API-Recipes / Issue #7: Disqus resize on orientation change?

Here's my question (posting here to save others from having to click through to GitHub):

Problem:

I've recently noticed that the Disqus embed does not resize on my iPhone during an orientation change.

Questions:

1. Is this the expected behavior? I assumed the Disqus embed is supposed to scale to fit its container ... This appears to be true, except for orientation changes.
2. If Disqus embed doesn't scale up/down, horizontally, to fit the container on orientation change, is the above Stack answer really the best way to make the Disqus embed scale to fit the container size on orientation change?

Is there an API recipe that could help me here?

Here's the answer:

This is expected behavior - we actually did this because Safari on iOS has difficulty properly resizing our iframe during orientation changes, so this ends up being a better experience.

This isn't something that can be controlled via your integration, so I'll close it. We'll keep evaluating alternatives and if we find a better solution, will definitely look into it.

Possible solutions:

1. Use the DISQUS.reset() technique as proposed by @kafran (and the orientationchange event as suggested by @MichaelReneer).

2. Just live with the fact that the Disqus embed doesn't resize, on iOS, on an orientation change.

3. Play with your meta viewport tag syntax (see below).

---

A workaround I'm currently using involves/involved me changing my <meta name="viewport" ... > from this (a traditional/standard setup):

<meta name="viewport" content="width=device-width, initial-scale=1">

... to this:

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

By just using width=device-width, this makes the page zoom on landscape orientation change thus avoiding the need for the Disqus embed to scale.

The iOS docs say:

device-width: The width of the device in pixels.

Other than the above, I wasn't able to get a good quote off of the Apple doc pages for Configuring the Viewport (I admit, I did not spend a lot of time searching Apple's site), but here's an excellent StackOverflow answer that sums up things rather nicely:

HTML5 Boilerplate: Meta viewport and width=device-width

The relevant information:

If you are designing a web application specifically for iOS, then the recommended size for your webpages is the size of the visible area on iOS. Apple recommends that you set the width to device-width so that the scale is 1.0 in portrait orientation and the viewport is not resized when the user changes to landscape orientation. [ie. The viewport retains portrait device width, but is scaled or stretched for presentation to fit the landscape width]

This solution may not be desirable for everyone. I happen to be working on a project where I think the zoom adds to the site's functionality (see note below), so I'm a happy camper.

Note ...

... about iOS and initial-scale=1:

<My2Cents>

When the viewport has initial-scale=1 defined, I've always been bothered by how the page "jumps" when going to/from portrait/landscape (on iOS) making me lose my place.

When only width=device-width is defined, then the page doesn't "jump" on portrait to landscape rotation and I get a "larger" zoomed-in view.

In terms of usability, I much prefer to keep my place when rotating my device vs. have to scroll around to find the "portrait mode" content that I was looking at before I rotated my device.

There's also something to be said about zooming in on landscape mode in terms of larger content being easier to read.

Lastly, rotating phone to zoom is faster/easier than pinching to zoom! :)

</My2Cents>