Response title
This is preview!
Move this topic
How to get browser screen width\height size?
in Using jQuery
•
4 years ago
Hi,
I would like to know how to get browser screen width\height size using jQuery? Is it possible?
I would like to know how to get browser screen width\height size using jQuery? Is it possible?
1
Replies(7)
Re: How to get browser screen width\height size?
4 years ago
var width = $(window).width();
var height = $(window).height();
But if you are monkeying with this in code, you really should consider whether you can do what you want with CSS.
Thanks for your reply!
$(window).width(); seems to get the correct screen width size!
but
$(window).height(); seems to get the screen height size + scroll area height size!
I don't want the scroll area height size to be included!
is it a jQuery bug or something? Any workaround for this?
$(window).width(); seems to get the correct screen width size!
but
$(window).height(); seems to get the screen height size + scroll area height size!
I don't want the scroll area height size to be included!
is it a jQuery bug or something? Any workaround for this?
It seems that jQuery is not compatible with browser "Quirks mode", and <!doctype html> should be declared in order to work properly!
by declaring <!doctype html>, $(window).height(); returns the correct size!
Example(Html code) (using <!doctype html>)
Example(Html code) (not using <!doctype html>)
by declaring <!doctype html>, $(window).height(); returns the correct size!
Example(Html code) (using <!doctype html>)
Example(Html code) (not using <!doctype html>)
I forgot to mention that, I tested all the doctypes declarations below and through all of them it's possible to get the correct browser viewport size:
Common DOCTYPE Declarations (html 5 "<!DOCTYPE html>" seems to be the recommended one):
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Common DOCTYPE Declarations (html 5 "<!DOCTYPE html>" seems to be the recommended one):
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Leave a comment on watusiware's reply
Re: How to get browser screen width\height size?
4 years ago
What do you mean by "scroll area"?
Do you mean the part below the bottom of the viewport?
Do you mean white space at the bottom of a short document that doesn't fill the viewport?
BTW, the part that you see is called the "viewport", so keep that in mind when reading documentation.
What exactly are you trying to accomplish? Usually, when you want to get viewport width/height, there is a more modern solution in CSS that does not require any JS code.
flexbox and vh,vw units are the bees knees!
Tried vw\vh today, unfortunately, they include the scroll bars!
It seems that there is no way to get browser viewport size in "quirks mode"!
so, the best way to go seems to be by using <!doctype html> declaration and use jquery $(window).width()/$(window).height() or javascript document.documentElement.clientWidth/document.documentElement.clientHeight
It seems that there is no way to get browser viewport size in "quirks mode"!
so, the best way to go seems to be by using <!doctype html> declaration and use jquery $(window).width()/$(window).height() or javascript document.documentElement.clientWidth/document.documentElement.clientHeight
Leave a comment on watusiware's reply
Re: How to get browser screen width\height size?
4 years ago
Well, of course. quirks mode sends your browser back - way back - to the stone-age.
Didn't realize about the scroll bars included. I only work with webviews in hybrid mobile apps, and so there are no scroll bars, and vh/vw works dandy in all recent mobile browsers and webviews.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to John Joe's question