How do I get actual screen height in an iOS web app - javascript

I am trying to determine the actual screen height in iOS.
On a short page. If I use the code below I get an incorrect size.
window.innerHeight
This will return 356 on my iPod touch. This is screen height - URL bar. If I add a CSS rule to the container of my page then it returns the correct number 416.
#container { min-height:600px; }
However, the problem with this solution is it adds a chunk of blank space at the bottom of some pages.
I have tried to fix this by doing the following.
$('#container ').css('height', '800px');
window.scrollTo(0, 1);
$('#container ').css({
'height' : window.innerHeight + 'px'
});
This doesn't work. It doesn't influence the page height at all and I am not sure why. Has anyone solved this problem before?

The window.screen object should contain what you're looking for
window.screen.height

Related

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.

Retrieving viewport height of screen in mobile browsers with jquery

I'm attempting to get the viewport height in mobile browsers WITHOUT the height of the browser bar but all of the solutions I've attempted have come up short.
What others have suggested is using the below, however it does not work for me. I still get a blank white bar at the bottom of the window when scrolling
var screenHeight = window.innerHeight;
$('.mobile-nav-wrapper').height(screenHeight)
I believe what you are looking for is scrollHeight
The scrollHeight property returns the entire height of an element in
pixels, including padding, but not the border, scrollbar or margin.
You can try this:
document.body.scrollHeight
Solution 1:
I don't have an answer using jQuery. But using a plain/vanilla JavaScript wouldn't cause any issue :).
Following script allows you to detect the Viewport size (height and width) reliably.
https://github.com/tysonmatanich/viewportSize
Sample usage:
<script type="text/javascript">
var width = viewportSize.getWidth();
var height = viewportSize.getHeight();
</script>
I have used it in couple of projects, were i have to re-initialize some widgets based on current Viewport width/height rather than using window width/height (Window width/height calculation isn't consistent in all browsers - some include scroll bar size 16px as a part of window width and some doesn't).
Sample Test page:
http://tysonmatanich.github.io/viewportSize/
Solution 2: (Just for reference - Not an answer to OP's question, though it is related so I thought that it can remain)
Well modernizr has a very good addition Modernizr.Mq. Through which you can cross check which break point range you are in...
if(Modernizr.mq("(min-width:320px)")){
//Do job 1
}
else if (Modernizr.mq("(min-width:768px)")){
//Do job 2
}
or
based on height
Modernizr.mq("(min-height: 800px)")
http://tysonmatanich.github.io/viewportSize/

jQuery: Div height set to default height 16px before breakpoint (only happens on Windows browsers)

I have jQuery on my homepage that sets the height of the FlexSlider based on the height of the window so that the slider is exactly the height of the window, no matter the width. I have a breakpoint at 1025 in the jQuery so that in 1024 and less than 1024 the div #homepage-fold (which includes all the content I want above the fold) and the flexslider images set to the default height of 550px. This works in all browsers I've tested in on my Mac and I can't reproduce the issue on my 13" MacBook Pro Retina but on multiple windows laptops the script seems to disable at 1041px instead of 1024 setting the inline css height of the div to style="height:550px" instead of using a working a script until responsive styles start to kick in at 1024px.
-- I've triple checked all of my media queries and looked in Chrome inspector but it appears the script is setting #homepage-fold height to the default of 550px at 1041< on these certain screens. I can't imagine it's an OS specific issue but for comparison I've used Chrome on both the Mac and Windows 8 and vista machines I've tested on that see the error.
jQuery(document).ready(function($){
// DOM READY
var $window = $(window), // cached
$fold = $('#homepage-fold'),
$slider = $('.flexslider .slides img'),
breakpoint = 1024,
defaultHeight = 550,
resizeTimeout,
callbackDelay = 0; // ms
function setFold(){
if( $window.width() < breakpoint ){
$fold.css('height', defaultHeight );
}
else {
$fold.css('height', $window.height() );
$slider.css('height', $window.height() );
}
}
setFold(); // initial setting
// Attach event
$window.on('resize', function(){
clearTimeout( resizeTimeout );
resizeTimeout = setTimeout(function(){
setFold();
}, callbackDelay );
})
});
Could someone point out any errors in my code or give me an idea for coming up with fix? I'd really appreciate it.
Thanks!
Nick
You know, I just subtracted 16px from the breakpoint and set it to 1008. I figured this would break the slider between 1008 and 1024 but it doesn't seem to and it fixed the problem on windows so I guess I'm good to go. Still would love to know of a real solution or reason for why this happened -- if someone has one please share. Thanks!
To match the width of the window perceived by the css and the width perceived by javascript, you can add a div giving it a width 100% and height 1px, positioning it fixed so that it doesn't affect the regular flow of the rest of the page and then instead of if( $window.width() < breakpoint ) , you could write if( $div.width() < breakpoint ) where $div refers to the div we added above. To hide the div from the page you can use a negative top style attribute.
You could do a similar thing with the height. But since usually there isn't a horizontal scrollbar, css height and javascript height will be the same.
Hope it helps.

window width in JS doesn't match max-width CSS

It looks like in chrome:
$(window).width()
is not matching the CSS3 media queries, when there are scroll bars. Without scrollbars it matches fine.
Does anyone know a good work around?
Here is the example: http://codepen.io/krismeister/pen/LmJFt/
Make your browser, about 600px wide then drag across teh 550px width. Then toggle the scrollbars. I'm on chrome Version 33.0.1750.152
I found this workaround on a similar stack thread:
CSS media queries and JavaScript window width do not match
Got a jsFiddle to work for you. http://jsfiddle.net/j839b/
Using this
function recordWidth(){
var w=window,
d=document,
e=d.documentElement,
g=d.getElementsByTagName('body')[0],
x=w.innerWidth||e.clientWidth||g.clientWidth,
y=w.innerHeight||e.clientHeight||g.clientHeight;
$('#last-width').text(x);
}
From http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
Im on chrome and seems to change with me:
No scrolls: last recorded width - win:1920, doc:1920, body:1904
With scrolls: last recorded width - win:1905, doc:1905, body:1889

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.

Categories

Resources