Menu
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. :)
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
99
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());
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
