How to reset disk space when changing mobile orientation

Question

I have an html page, I use twitter bootstrap for a responsive layout, and I also use Disqus for comments. When I initially load the page, everything loads fine from my mobile phone (iPhone 5), and Disqus has the size in the container (mainly over the entire width of the screen). When I rotate the phone to the landscape and back, no problems with a responsive design, it resizes and behaves exactly the way I want. The problem is that the Disqus iframe does not resize on my mobile phone after the initial page load.

I am wondering if I have a good way to help Disqus change it myself.

Answer 1

Make Disqus reset on the resize;) page. 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 related to the accepted answer ):

Home > Developers > Using Disqus on AJAX Sites

... there is this note:

See the DISQUS API Recipes repository on Github for a sample DISQUS.reset recipe .

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

disqus / DISQUS-API-Recipes / Issue # 7: Resizing disk space when changing orientation?

Here's my question (posting here to save other users from having to switch to GitHub):

Problem:

I recently noticed that embedding Disqus does not change on my iPhone during orientation changes.

Questions:

• Is this expected behavior? I suggested that the Disqus embed should scale to fit its container ... This seems true, except for orientation changes.
• If the Disqus embed does not scale up / down horizontally to fit the container when changing orientation, is the above stack answer really the best way to do Embed Disqus into the size of the container when changing orientation?

Is there an API recipe that could help me here?

Here's the answer :

This is the expected behavior - we actually did it because Safari on iOS makes it difficult to resize our iframe correctly during orientation changes, so it becomes a better experience.

This is not something that can be controlled through your integration, so I will close it. We will continue to evaluate alternatives, and if we find a better solution, be sure to consider it.

Possible solutions:

• Use the DISQUS.reset() method as suggested , using @kafran (and the orientationchange event as ) from @MichaelReneer).

• Just live with the fact that embedding Disqus does not resize iOS when changing orientation.

• Play with the meta viewport tag syntax (see below).

---

The workaround that I am currently using includes / includes changing my <meta name="viewport" ... > from this (traditional / standard setting):

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

... to that:

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

Just using width=device-width , this will cause the page to scale when the landscape orientation changes, which avoids the need to embed a disk array.

iOS docs say :

device-width : device width in pixels.

In addition to the above, I could not get a good quote from the page of the Apple document for Customizing the viewport (I admit that I did not spend much time searching for the Apple site), but here is a great StackOverflow answer that summarizes things pretty nicely:

HTML5 Boilerplate: Meta viewport and width = device width

Relevant Information:

If you are developing a web application specifically for iOS, the recommended size for your web pages is the size of the visible area on iOS. Apple recommends setting the width to the width of the device so that the scale is 1.0 in portrait orientation and the viewing area does not change when the user orientation changes. [i.e. The viewport retains the width of the portrait, but is scaled or stretched to represent the width of the landscape]

This decision may be undesirable for everyone. I happen to be working on a project where I think that zoom adds functionality to the site (see note below), so I'm a happy tourist.

Note...

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

<My2Cents>

When initial-scale=1 indicated in the viewport, I was always worried about how the page “skips” when moving / from portrait / landscape (on iOS), causing me to lose my place.

When only width=device-width , the page does not “jump” to portrait rotation on the landscape, and I get a “magnified” enlarged image.

In terms of usability, I prefer to keep my seat when I rotate my device and scroll it to find the content of the “portrait mode” that I was looking at before I turned my device around.

You can also say about scaling in landscape mode in terms of more convenient reading of larger content.

Finally, turning the phone to zoom will be faster / easier than compressing to zoom! :)

</My2Cents>