I am developing browser games that have only one full-size canvas element in body.
When run these games in iOS9.2(iPad) Chrome(Ver 47.0.2526.107), the bottom area of game screen is not shown. (It didn't happen several months ago. Even now this neither happen in Safari, nor Android 5.0.2 Chrome 47.0.2526.83)
These game programs first calculate size of window (the area showing html document when address bar is shown), and places a canvas element having the size.
Since some version of Chrome, the "size of window" is interpreted as the size of window when address bar is NOT shown.
I tried to get the height of window by:
screen.availHeight
window.innerHeight
$(window).height()
document.documentElement.clientHeight
document.height
$(document).height()
but they all returns the same value, the height when address bar is NOT shown.
Test code is shown in http://jsrun.it/hoge1e4/4Ygq I want to know the value of the scale at bottom of the screen when address bar is shown.
(see picture)
The problem seems to be solved by version-up.
I checked it on ver.49.0.2623.73
Related
I want to calculate browser height without considering browser address bar and bottom navigation bar height.
The value of screen.height will give the full browser height. I've highlighted area in orange in attached image. Looking for generic solution which will work on all mobile devices
Easily:
window.innerHeight
There is an algorithm to obtain the height of the viewport excluding, if rendered, the horizontal scrollbar.
See also the offical docs.
Open the console in chrome (whilst on SO) and copy in innerWidth + "|"+outerWidth + "|" + screen.width, for me this will return 2133|1920|1920, apparantly the innerWidth is greater than the outerWidth... As if this isn't strange enough I next tried running this code in firefox and it returns 1920|1936|1920. Apparantly my outerWidth is greater than my screen size. (All screens were normally maximized). Strangely enough running the same code on a 'normal' page (not stackoverflow) will return 1920|1920|1920 in chrome, firefox however still insists my outerWidth is greater than my screen.
Have looked around on google, found a couple of articles regarding the functionality on mobile devices, but nothing seems to explain any of the above observation.
One reason innerWidth could be larger than outerWidth is if your browser is zoomed. I got the following results with the browser in fullscreen mode:
zoom inner outer
75% 1706 1280
90% 1422 1280
100% 1280 1280
110% 1164 1280
The only way I could get outerWidth to be larger than screen.width is by changing the window width by dragging.
There is a difference between getting of innerWidth and outerWidth.
Look at official definitions:
Window.innerWidth: is Width (in pixels) of the browser window viewport including, if rendered, the vertical scrollbar.
Window.outerWidth: The outerWidth attribute must return the width of the client window.
As you can see innerWidth has bound to viewport width, while outerWidth has bound to browser window width.
Therefore outerWidth can be less than innerWidth when your page is just zoomed in, or page view is scaled up.
I think you need to state folloving tag in your page:
<meta name="viewport" content="width=device-width, initial-scale=1">
It will make you page to behave as expected (fit to width limits of screen) in small viewports.
And as a possible cause of large innerWidth is the scripts or styles that can change window dimensions.
If we take the MDN definition of window.outerWidth:
Window.outerWidth read-only property returns the width of the outside
of the browser window. It represents the width of the whole browser
window including sidebar (if expanded), window chrome and window
resizing borders/handles.
And for window.innerWidth:
The read-only Window property innerWidth returns the interior width of
the window in pixels. This includes the width of the vertical scroll
bar if one is present.
Concluding:
The outerHeight and outerWidth take into account the browser window size and not the html visible size. Because of that, the values can change from browser to browser and device to device. Moreover, the values can be larger than the device screen itself.
The innerWidth value includes the scroll if present. This means the width value will not be only referring to the visible part but also the amount of scroll left which could be greater than window.outerWidth.
I recently purchased an ASUS c100p Chromebook and noticed that when the device is flipped all the way back into "tablet" mode that sizable windows are maximized by default. If they have fixed window bounds they are effectively treated as modal (centered, immovable, and peripheral areas are dimmed) when in the foreground, unless they are set to have the alwaysOnTop attribute in which case they can be moved freely. I want to be able to detect this change so I can have an app with fixed window bounds perform some sort of action (maximize, close, set to alwaysOnTop, etc.). Is there a some way of detecting this transition in Javascript?
I've tried the following events with no success:
chrome.app.window.onFullscreened - Nothing fires on transition.
chrome.app.window.onMaximized - Fires on resizable windows, but not windows with fixed bounds.
chrome.system.display.onDisplayChanged - Fires if device is rotated from landscape to portrait while transitioning, but not if going straight to landscape tablet mode.
You could detect to see if the inner width and height of the window is the same as the fixed bounds with this code:
if(window.innerWidth != 400 || window.innerHeight != 400) {
// some code, eg window.close()
}
Replace the 400s with the width and height the window is being opened with.
I am creating a web page in which when user hovers on an image it displays a paragraph which is enclosed in a division under it. When the user moves the cursur out of the image the division disappears.
My problem is that when the user clicks the image which is in the bottom of the screen.. i want the page to be scrolled using javascript until the division at the bottom is visible...
I want to know how to do this one. Which function to use??
Thanks in Advance..
Basically you will need to calculate height of your browser window.... then also know the height of your image and it's offset (i.e. where it is placed)...
doing some maths you will get the additional page scroll you want to have...
simply do it...
Here are some functions for you:
in Internet Explorer (backward-compatibility mode):
document.body.offsetWidth, document.body.offsetHeight
in Internet Explorer (standards mode, document.compatMode=='CSS1Compat'):
document.documentElement.offsetWidth, document.documentElement.offsetHeight
in most other browsers – as well as IE9 (standards mode):
window.innerWidth, window.innerHeight (the page's visible width/height)
window.outerWidth, window.outerHeight (the browser outer width/height)
take directly from here: http://www.javascripter.net/faq/browserw.htm
you can check more specific examples here on how to calculate required parameters.
I'm working on a Chromium extension that runs a context script on a constrained window, and want to increase the window height by one pixel (I need the page to reposition, since I'm injecting HTML into it).
I'm attempting to use the following code:
window.resizeTo(window.innerWidth, window.innerHeight + 1);
but this shrinks the window (I suspect because Chromium resizeTo sets window size, but innerWidth and innerHeight gets the size of the TabContents window pane (not including the top bar and border).
How can I either get the proper size or properly resize the window? Thanks for any advice.
You actually want window.outerHeight/window.outerWidth, which includes all of the browser UI.