JQuery: How to detect mobile width and change my css to it's with using jquery?

Question

How to detect mobile width and change my css to it's current window width using jquery?

For Example

.page {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    float: left;
    margin: 40px 0;
    max-width: 480px;
    min-height: 720px;
    height: auto;
    min-width: 360px;
    padding: 10px;
    width: 100%;
}

and then I have this function but I am not sure if it's really working.

function responsiveFn() {
    width = $(window).width();
    document.getElementById('widthID').innerHTML = width;
    jQuery('.page').css({
        max-width: width
    });
}

Thanks for the answer in advance! :)

That should work fine except max-width inside css should be covered in ' ' !! what you are getting as now? — Guruprasad J Rao
– Guruprasad J Rao, Commented Aug 25, 2015 at 6:41
Mate, it's still not adjusting. I am using this for mobile. Actually I have Div (wrapper) inside div (index): <div id="wrap"> <div data-role="page" id="index" class="page"> #wrap { box-sizing: border-box; height: auto; overflow: hidden; width: 1200%; } Because it's a horizontal scrolling, I divided my pages in this 1200%. — Ayuk
– Ayuk, Commented Aug 25, 2015 at 6:50

Tushar · Accepted Answer · 2015-09-01 10:31:52Z

1

No need of using Javascript/jQuery, check the below points.

Suggestions:

Use width in percentages so, when resized it'll auto adjust
Use media queries for resolution specific styles
When setting properties from Javascript, use quotes around property name or use camelcase. Ex. maxWidth, or 'max-width'

Example:

@media (max-width: 600px) {
    .page {
        width: 200px;
    }
}

Create separate CSS file for various resolutions and load them for such resolutions

Example:

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 600px)" href="mobile.css" />

Update

If you still want to use Javascript, call your function on window resize event.

window.onresize = responsiveFn;

Use max-width in quotes

jQuery('.page').css('max-width', width);

edited Sep 1, 2015 at 10:31

answered Aug 25, 2015 at 6:43

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ayuk Over a year ago

Thanks mate, but tired of doing this one. I got this separated css for mobile.

Tushar Over a year ago

@Ayuk Kindly check the updated answer, especially the bottom part

Tushar · Accepted Answer · 2015-08-25 06:56:05Z

0

Please use media query for all the elements as per your requirement example

@media screen and (min-width: 320px) and (max-width:580px) {
    .btn-default {
        float: none;
        max-width: 100%;}
    .textcenter {
        text-align: center;
    }
}

As button and textcenter class will be changed with the mentioned property

Thanks

edited Aug 25, 2015 at 6:56

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

answered Aug 25, 2015 at 6:53

tushar dhingra

34 bronze badges

Collectives™ on Stack Overflow

JQuery: How to detect mobile width and change my css to it's with using jquery?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related