Jan 042015
 
Article Android

With the arrival of the smartphones, that allow the user to navigate the internet, the way new websites are designed has changed. Most of new designs are “responsive”, that is, they adapt their layout to the dimensions of the screen where they are being displayed.

But, for many of the websites that existed previously, the change to a responsive design is not an easy task. Nevertheless, there are some minor changes that can be done to a non-responsive design, that may improve the rendering of a site on screens that are smaller than the target resolution of the original design.

This post explains some of the possible design changes that can be done on a non-responsive website.

The viewport meta tag

Quite possibly, the webmaster of a given non-responsive website, when searching how to deal with this issue, will find a good number of references about a “viewport” meta tag that needs to be added to the HTML header, as follows:

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

This is only true for responsive web sites. Let’s take as an example the “Streets of California” website by OpenAlfa:

Without the viewport metatag, the rendering of the site in a mobile device looks like this:

california-st-sin-viewport

We can see that the Firefox browser we are using has scaled the page, which is 1040 pixels wide, to the 360 pixel width of the screen in the mobile device. This results in most of the texts becoming too small, forcing the user to zoom in to be able to read the content.

Then, if the viewport metatag is added to the header exactly as shown above, and the page is reloaded, the result obtained is as can be seen in the screenshot below:

california-st-viewport-1

In this case, the “initial-scale=1.0” setting tells the browser not to scale the page. Therefore, only the first 360 horizontal pixel are displayed.

Our goal is to display, in low resolution devices, the main content of the site, which is 740 pixel wide, removing the sidebar. Therefore, we need to specify a viewport with a fixed width of 740 pixel, as follows:

<meta name="viewport" content="width=740">

After the page is reloaded, is is rendered on the device as:

california-st-viewport-2

This time, the browser scales the specified viewport width of 740 pixel to the horizontal dimension of the screen of 360 pixel.

This is a slight improvement, but the size of most texts is still too small. On the other hand, the user still has access to the sidebar scrolling horizontally.

Configuring the viewport dynamically

The behaviour of the Firefox browser we used in the previous test of the viewport metatag, when the “initial-scale” attribute is not especified, is to scale the viewport content to the size of screen.

However, this is not the case if the test is done in the same device, but using the Chrome browser. In this case, Chrome scales the full page to the size of the screen, without considering the viewport size.

To avoid this undesired behaviour, an initial value must be specified for the initial-scale attribute. But the actual value must be computed, because it depends on the horizontal resolution of the screen where the page is being loaded.

The solution is to dynamically generate the viewport tag using javascript. In javascript, the horizontal resolution of the screen is available in the “screen.width” variable. Therefore, we can replace the static specification of the viewport with a small script:

<!--<meta name="viewport" content="width=740">-->
<script>
var head = document.head || document.getElementsByTagName('head')[0];
function setViewPort() {
  var ww = screen.width;
  var scale = Math.round(ww*100 / 750.0) / 100.0;
  if (scale > 1) scale = 1.0;
  var meta = document.createElement('meta');
  meta.name = "viewport";
  meta.content = "width=740, initial-scale=" + scale;
  head.appendChild(meta);
}
setViewport();
</script>

and then we can verify that this achieves the desired behaviour of scaling the viewport to the screen width, both in Chrome and in Firefox.

Configuring the viewport on orientation change

The viewport can also be dinamically modified when the user changes the orientation of the device from portrait to landscape and viceversa.

Having defined the “setViewport()” function as explained in the previous section, it should be enough to set up a handler for the “orientationchange” event, as follows:

window.addEventListener("orientationchange", function() {
  setViewPort();
}, false);

But the current version of the Firefox browser does not include support for the “orientationchange” event. Instead, the workaround explained in this post can be used. The final code to handle the orientation change would be:

if (typeof window.orientation === 'undefined') {
  // Firefox
    var detectOrientacion = window.matchMedia("(orientation: portrait)");
    detectOrientacion.addListener(function(m) {
        setTimeout( setViewport, 200);
    });
} else { 
  // Chrome and other browser
    window.addEventListener("orientationchange", function() {
        setTimeout( setViewport, 200);
    }, false);
}

 

References

 Posted by at 8:52 pm

 Leave a Reply

(required)

(required)