CODEWITHSUNDEEP
javascriptandroidjquery-mobile
David Brierton
David Brierton

Reputation: 7397

Guidelines for resizing and adjusting for mobile devices using javascript

I have been having an issue with resizing web pages to fit on mobile devices using JavaScript. Is there a certain width that most programmers use to start changing the resize for mobile devices? Can anyone recommend any guidelines that I should or need to follow when working with mobile devices? I am now being instructed to make sure all web pages are "mobile friendly".

function adjustStyle() {
        var width = 0;
        // get the width.. more cross-browser issues
        if (window.innerHeight) {
            width = window.innerWidth;
        } else if (document.documentElement && document.documentElement.clientHeight) {
            width = document.documentElement.clientWidth;
        } else if (document.body) {
            width = document.body.clientWidth;
        }
        // now we should have it
        if (width < 650) {
            document.getElementById("myCSS").setAttribute("href", "css/narrow.css");
        } else {
            document.getElementById("myCSS").setAttribute("href", "css/main.css");
        }
    }

    // now call it when the window is resized.
    window.onresize = function () {
        adjustStyle();
    };

Upvotes: 1

Views: 2973

Answers (2)

radiovisual
radiovisual

Reputation: 6468

For starters, you shouldn't rely on Javascript to make your pages responsive to different resolutions or screens sizes, CSS can handle that for you using media-queries.

Javascript should be used in responsive design only under these circumstances:

  • You have an extreme design feature that is impossible to pull off correctly in CSS
  • You want to enhance your web page by adding in some interactions, animations or custom behaviors.
  • You have an experimental website where users are expecting something out of the ordinary
  • You are willing to warn your users if javascript is required to display/run your page properly.

It is best practice to only use javascript to enhance your page after you have written your responsive layouts in CSS, that way, your site is still functional if javascript is turned off in the browser.

"Progressive enhancement" is a popular technique for web developers who want to get the page looking nicely while assuming Javascript is turned off, so that users without javascript will still get a nice experience, then, progressive-enhancement in javascript means that the user can be ensured an even better experience if they have javascript turned on, because they might see some nice animations, and cool parallax scrolling, etc.

With that said, your question was directly asking about using javascript for responsive design, so from there, the advice is simple:

Use jQuery's bind() or resize()functions to listen for browser resize events:

$(window).resize(function() {
    // handle layout here
    // change widths, heights, positions, etc
});

$(window).bind("resize", function(){ 
    // handle layout here 
    // change widths, heights, positions, etc
});

And from there, you can effect the width's height's and positions of your elements, or assign CSS properties to them, depending on your design.

As for good "breakpoints" (screen sizes to watch for in your responsive layouts), you can refer to this guide: Media Queries for Common Device Breakpoints.

I tend to start somewhere around here, and then tweak as I go:

Mobile: width: 320px - 750px
Tablets: width: > 750px - 1024px
Laptops/Desktops: width: > 1024px

And then I test on multiple devices, and make changes accordingly, your final design will dictate the final numbers you choose as your breakpoints.

Hope this helps.

Upvotes: 2

user4409098
user4409098

Reputation:

I typically use a width of 600 to adjust for mobile devices.

Make sure to add this meta tag inside the <head> tag:

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

This should make the page render at a reasonable size.

Add this <style> tag inside the <head> tag:

<style>
img {
    max-width: 100%;
}
</style>

I think this will make sure all images don't render any wider than the app's webview's viewport.

(If that doesn't work, try width: 100%; instead. That'll definitely make all images be as wide as the viewport, and therefore no wider.)

You can also try the @media tags in your css, they allow you to completely reprogram it depending on the resolution:

    @media screen and (max-width: 600px) {
  .button {
    width:300px;
  }
   }

then for different resolutions above mobile

@media screen (min-width: 600px) and (max-width: 1200px) {
  .button {
    width:500px;
  }
}

But you can always use jquery's

$(window).resize(...) which binds a callback for the resize event or triggers this event.

Bind a callback function, if the users resizes the browser window:

$(window).resize(function() {
    alert('resize handler called');
});

If you want to call all listeners manually (without any parameters):

$(window).resize();

Upvotes: 1

Related Questions