Develop Reference

How to know whether a browser is displaying scrollbar is present or not in reactjs?

I am working on react project. when we make the screen size decrease from large to tiny, a scroll bar is appearing in the browser and as a result my testcases are failing.I wanted to know is there any way we can find whether a scroll bar is displayed in the browser for all types of screen sizes. Also is there any way to get the size of the scroll bar being displayed in the browser?

You can compare the height of your content with the height of the window.
So if (document.body.offsetHeight > window.innerHeight) then the scrollbar would be visible.
UPD:
Regarding scrollbar's sizes. Its width is just a difference between window.innerWidth and document.body.offsetWidth, and its height is equal to window.innerHeight.
So summing up:
let scrollbarSize = {
heigth: window.innerHeight,
width: window.innerWidth - document.body.offsetWidth
}

I would have preferred a comment but I do not have access to that yet.
I am assuming you are talking about height here if not please apply the same solutionwhere appropriate.
To know whether your browser is displaying the vertical scrollbar. Compare the height of the document and the screen height.
Method for the calculation of document height would usually vary across browsers in this case. Use something like this:
let scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
To calculate your window height use:
const windowHeight = documentElement.clientHeight
If your scrollHeight is greater than the windowHeight then you can be most certain that the vertical scrollbar is present.
Therefore it would be easy to detect

In this sandbox I have tested two posible solutions. First approach (ScrollableComponent and hook useIsScrollable) is based on trying to scroll with element. If it does something then you know that it has scrollbar. The second aproach is based on measuring (ScrollableComponentA and hook useIsScrollableA). Measure wrapper element and inner element and compare its height and width.

Identify portrait or landscape mode and zoom level for mobile devices (but not specific to browsers)

I know one of the answer for identifying portrait or landscape node is -
window.innerWidth > window.innerHeight
But after 60th version of chrome, the definition of innerWidth and innerHeight has changed and now it represents layout viewport.
So as soon as keypad is opened, although the device is in portrait mode, window.innerHeight becomes smaller than window.innerWidth and it says it is landscape mode.
Also please note below things-
Don't want to put browser specific checks.
When orientation is changed some devices fire resize event too before
actually changing the orientation value.So, in that case in resize
callback, the orientation of device will actually be landscape but
orientation value will report it as portrait.
window.screen.orientation is also not compatible for different
browsers.

You might want to use screen.width and screen.height, as they do not take into account whether or not the keyboard is visible, it simply returns the viewport dimensions.
let screenOrientation = () => {
return screen.width > screen.height ? "landscape" : "portrait";
}

You could use outerWidth instead of innerWidth to prevent any viewport stuff
if (window.outerWidth > window.outerHeight) {
//Landscape
}

Android browser's screen.width, screen.height & window.innerWidth & window.innerHeight are unreliable

I'm working on a web app that is targeted to browsers on desktop, tablet and smartphone.
The web app has a light box implemented using Colorbox with an iframe. When the browser window is resized or the tablet/phone has it's orientation changed, Javascript code queries the window dimensions so that it can resize some elements of the light box.
The issue I'm having is that everything works fine on desktop (Windows: IE, Firefox, Chrome, Mac: Safari), iPad & iPhone but not on the Android smartphone (HTC) and Android Emulator.
Android always returns different values for screen.width, screen.height, window.innerWidth & window.innerHeight when they're queried from inside the window's resize event, which fires multiple times.
Why is the Android browser returning such a wide variance in values and how can I reliably detect the width and height of the browser window?

On Android, window.outerWidth and window.outerHeight are reliably the screen size. Depending on your version of Android, innerWidth/Height is usually incorrect.
Here's a really good writeup on the situation.

Below is differentiation based on readings with Samsung Tab running Android 4.1
screen.height - gives actual device height including task bar and
title bar
window.innerHeight - gives the height excluding task bar, title bar
and address bar(if visible)
window.outerHeight - gives the height excluding task bar and title
bar height, (no matter address bar is visible or hidden, outerHeight
include the address bar height.)

I took me hours to find a workaround.
The only constant among window.innerHeight, window.outerheight, etc was screen.height.
This code gave me the outerheight:
screen.height / window.devicePixelRatio - window.screenTop
Also, in order to support older versions of android, place your code in a setTimeout
I hope this is helpful =)

I'm using this to make it work between ios and android.
var screenHeight = (ionic.Platform.isIOS()) ? window.screen.height : window.innerHeight * window.devicePixelRatio;

Try this, and check your mobile reading
<script>
var total_height=screen.height*window.devicePixelRatio;
alert(total_height);
</script>
It should match the screen size (height) of your phone specifications.

var throttle = (function () {
var timer;
return function (fn, delay) {
clearTimeout(timer);
timer = setTimeout(fn, delay);
};
})(),
var callback = function (w, h) {
alert(w + ' ' + h);
}
window.onresize = throttle(function () {
width = Math.min(window.innerWidth, window.outerWidth);
height = Math.min(window.innerHeight, window.outerHeight);
callback(width, height);
}, 60);

Dan's answer fix the inconcistancy between android's browser..
so I post how I detect/change mobile viewport and adapt it when rotated
(don't know if usable for any one...
var lastorg=0; //set the begining of script
thisorg=parseInt(window.innerWidth)/parseInt(window.innerHeight); //for ratio to detact orietation
if(((lastorg<1 && thisorg>1) ||(lastorg>1 && thisorg<1) ||lastorg==0 )){ //is start or change
$("#viewport").attr('content', 'width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1'); // reset viewport to device
mywidth = Math.min(window.innerWidth, window.outerWidth); //Dan's way to fix the inconsistancy
myheight = Math.min(window.innerHeight, window.outerHeight);
lastorg=thisorg; //update the lastorg
wr=parseInt(mywidth)/1280; // the minimum desire width
hr=parseInt(myheight)/630; // the minimum desire height
if(hr<wr){
vscale=hr;
if(hr<1){ // if it if small screen, so desktop pc wouldn't change
windowHeight=630;
windowwidth=mywidth/hr;
}
}else{
vscale=wr;
if(wr<1){
windowwidth=1280;
windowHeight=myheight/wr;
}
}
$("#viewport").attr('content', 'width=device-width, initial-scale='+vscale+',minimum-scale='+vscale+', maximum-scale='+vscale); //reset viewport toresize window
if(thisorg>1){
$("#pro").fadeOut(500);
}else{
$("body").prepend("<div id=pro style='position:absolute;width:800px;height:30px;padding:30px;left:"+(windowwidth/2)+"px;top:"+(windowHeight/2)+"px;margin-left:-430px;margin-top:-45px;;border:1px solid #555;background:#ddeeff;text-align:center;z-index:99999;color:#334455;font-size:40px;' class=shadowme>Please rotate your phone/tablet</div>");//tell user to rotate
}
}

In my case, the setTimeout hook was not useful.
After some digging, I discover that different Android versions (and devices) have different devicePixelRatio values.
If the devicePixelRatio is equal or greater than 1, the actual number of pixels in the screen (for the html page point of view) is given by window.screen.width (or ...height).
But, if the window.screen.width is less than 1 (it happens in some old Android devices), the actual number of pixels becomes: window.screen.width/devicePixelRatio.
So, you just have to cope with this.
w = window.screen.width;
h = window.screen.height;
if(window.devicePixelRatio < 1){
w = window.screen.width/window.devicePixelRatio;
h = window.screen.height/window.devicePixelRatio;
}

How to make window.innerHeight work on mobile devices when zooming?

window.innerHeight
Yes, it will return the value of the browser's height on a mobile device. However, the problem comes (on some browsers) when a user tries to pinch to zoom in or zoom out. The value will not adjust properly and instead still return the full length of the page.
Let's say it was 500px when loaded. The user then zooms in and the height is now 200px. However, the value is still returning 500px.
Does anyone know a method to fix this? Been searching forever.

The way I fixed this was to remove any resize callback in my code. Sounds weird, but it worked for me.

Check out the accepted answer in this link:
Detect page zoom change with jQuery in Safari
If your want innerHeight, may be get original width and then zoomed width, get zoom ratio and then calculate the new Height (after zoom).

This worked for me. The first thing I do is grab window.innerHeight and window.innerWidth from the dom when the page loads so I get the original values and store them in javascript variables. Then in my window.onresize event handler I do this.
var height = null;
var width = null;
if (window.orientation && window.orientation == -90) {
height = myOriginalHeight;
width = myOriginalWidth;
}
else {
height = myOriginalWidth;
width = myOriginalHeight;
}
doCallbacks(width, height);
My app resizes a lot because I attempt to write one ui for all screen types. According to my testing with the app this works on ipad and andriod and all the resizing works when zoomed in or orientation changes which can sometimes cause zoom to occur.
The interesting aspect of this is mobile browsers never actually change screen sizes as they are fixed, they just zoom. But if you resize to original width/height and handle orientation this way it seems to work.

How to get document height and width without using jquery

How to get document height and width in pure javascript i.e without using jquery.
I know about $(document).height() and $(document).width(), but I want to do this in javascript.
I meant page's height and width.

var height = document.body.clientHeight;
var width = document.body.clientWidth;
Check: this article for better explanation.

Even the last example given on http://www.howtocreate.co.uk/tutorials/javascript/browserwindow is not working on Quirks mode. Easier to find than I thought, this seems to be the solution(extracted from latest jquery code):
Math.max(
document.documentElement["clientWidth"],
document.body["scrollWidth"],
document.documentElement["scrollWidth"],
document.body["offsetWidth"],
document.documentElement["offsetWidth"]
);
just replace Width for "Height" to get Height.

This is a cross-browser solution:
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

You should use getBoundingClientRect as it usually works cross browser and gives you sub-pixel precision on the bounds rectangle.
elem.getBoundingClientRect()

Get document size without jQuery
document.documentElement.clientWidth
document.documentElement.clientHeight
And use this if you need Screen size
screen.width
screen.height

You can try also:
document.body.offsetHeight
document.body.offsetWidth

This should work for all browsers/devices:
function getActualWidth()
{
var actualWidth = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidth;
return actualWidth;
}

If you want to get the full width of the page, including overflow, use document.body.scrollWidth.

window is the whole browser's application window. document is the webpage shown that is actually loaded.
window.innerWidth and window.innerHeight will take scrollbars into account which may not be what you want.
document.documentElement is the full webpage without the top scrollbar. document.documentElement.clientWidth returns document width size without y scrollbar.
document.documentElement.clientHeight returns document height size without x scrollbar.

How to find out the document width and height very easily?
in HTML
<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>
in javascript
var c=document.querySelector('#hidden_placer');
var r=c.getBoundingClientRect();
r.right=document width
r.bottom=document height`
You may update this on every window resize event, if needed.