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

how detect mobile width , change css 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 have function not sure if it's working.

function responsivefn() {     width = $(window).width();     document.getelementbyid('widthid').innerhtml = width;     jquery('.page').css({         max-width: width     }); } 

thanks answer in advance! :)

no need of using javascript/jquery, check below points.

suggestions:

1. use width in percentages so, when resized it'll auto adjust
2. use media queries resolution specific styles
3. when setting properties javascript, use quotes around property name or use camelcase. ex. maxwidth, or 'max-width'

example:

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

3. create separate css file various resolutions , load them such resolutions

example:

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

update

if still want use javascript, call function on window resize event.

window.onresize = responsivefn; 

use max-width in quotes

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