CODEWITHSUNDEEP
javascriptandroidioscssresponsive-design
The Hawk
The Hawk

Reputation: 1568

Responsive Web and Mobile Devices

When writing responsive web sites, sometimes I need to do dom manipulations with JavaScript. Often these include calculations involving the screen height or width. After several hours of frustration and using the Google Chrome Emulator, I've discovered that screen height and width is best derived with the screen.height and screen.width for mobile devices and web browsers with window.innerHeight and window.innerWidth.

With web browsers, if you use the screen object it returns the screen size, not the current size of the browser.

Two questions:

Upvotes: 0

Views: 68

Answers (1)

Sean Thorburn
Sean Thorburn

Reputation: 1778

I would advise against using JavaScript for responsive displays.

Rather stick to CSS.

You can use media queries to identify the screen size of the device viewing the page. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

You can also do calculations with CSS eg. 

.moo {
    width: calc(100% - 200px)
}

Upvotes: 1

Related Questions