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();
    };

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.

Hello, buddy!责编内容来自:Hello, buddy! (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Guidelines for resizing and adjusting for mobile devices using javascript

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录