3

I tried several javascript functions but it doesn't work for me. I am building a mobile responsive websites and some of the functions give me different results.

This is the functions I used.

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
    swidth = screen.width,
    sheight = screen.height;

Browser target: UC Browser, Opera Mini, Chrome, Firefox. Note: I am not using jQuery for this project.

Advance thanks to those who will help me. :)

  • 1
    OS chrome (scrollbars, taskbars, etc.) and the chrome of the browser itself will cut what the window has available down from what the screen provides. http://www.quirksmode.org/dom/w3c_cssom.html#screenview – flowtron Jul 07 '16 at 07:35

2 Answers2

1

It's best to use the window.innerHeight and window.innerWidth. The innerHeight and innerWidth properties capture the dimension of the browser window. This is what css media query uses to do responsive layouts. You can also use window.outerWidth and window.outerHeight. The different between inner and outer is the margins, paddings and browser content which the client's browser adds to the window.

The width and height properties of the screen object capture the screen resolution of the client's computer. This is definitely not what you want, especially in the case where a client has your website in a split view. the clientWidth and clientHeight represent the overall size of the document within the current browser view. Again, this is definitely not what you want to create responsive design.

However, check this for more explanation and a neat way of using media query in JavaScript. Otherwise, try w3schools example of inner width

b4oshany
  • 692
  • 1
  • 7
  • 15
1

window.innerWidth,window.innerHeight,window.outerWidth,window.outerHeight get you proper outer, inner height and width of viewport screen and can use this while working on responsive design. But media query or bootstrap based website are best if you are planning for responsive website. And if you are using javascript use window.innerWidth+innerHeight property.

document.documentElement.clientWidth + document.documentElement.clientHeight get's you the height and width of html tag <html>

document.body.clientWidth + document.body.clientHeight get's you the height and width of body tag <body>

function ld(){
var a = window.innerWidth;
var b = window.innerHeight;
var c = window.outerWidth;
var d = window.outerHeight;
console.log("innerWidth = " +a +" " +"innerHeight = " +b +" "+"outerWidth = " +c +" " +"outerHeight = " +d );
}
window.addEventListener("load",ld());
frnt
  • 8,455
  • 2
  • 22
  • 25
  • I'm using media queries. It is good but when when you are developing in opera mini and uc browsers. Some of the element property will not work. That's why I used userAgent to detect browser and apply some fallback properties on given element. Viewport Height of css isn't working on some browser. It's pretty hard to develop websites in some mobile browser because they offer the speed mode. And I should make the website in speed mode on. So that it will render properly in either way. –  Jul 07 '16 at 09:05
  • Well I too have come through this issue while developing sites using wordpress and there is some partial support issue form browser side. http://stackoverflow.com/questions/30851085/css-responsive-design-in-mobile-is-not-working-on-uc-browser-and-opera-mini check this link will help you. – frnt Jul 07 '16 at 10:54