I have a web app that I want to exactly vertically fill the browser viewport, including pushing the address bar up past the top.
Is there some way of getting the browser viewport size without the address bar? Currently, I am using jQuery like:
$("#mainBox").height($(window).height)
but this will fill the viewport minus the address bar, causing the element to be too narrow when viewed in landscape.
For iPhone, I was getting around this by hard-coding the iPhone browser viewport sizes into the page, but there are obvious problems with that.
You need to reset the height in an oerintationchange event. So is you create an orientationchange event handler for the window you need to call the same line inside that handler and you will get the new window height and you should be good.
Related
We got a list of cards that show a small part of a textbox. That textbox is limited in height via CSS. When a user clicks on "Details" the textboxes height is changed via javascript to the real height of the content.
The problem is, that when the viewport / window is scrolled and the cards height increases, it pushes itself out of the viewport. When the window is not scrolled at all, it works.
Please see the following video: https://monosnap.com/file/HauaJrJlkx2MBLGt3QOa5ulJMxFTnv
0:00 -> 0:08 is the desired opening / closing behavior that I want
0:09 -> 0:16 is the behavior I do not want, as the top text is moved out of the viewport.
Is there a way to keep the viewport, preferably without JS?
Edit: This happens only in Chrome (84.0.41), in Firefox and Safari it works as expected.
I can send you a link to the staging environment if necessary, please contact me via info#felixhagspiel.de
Looks it's done more logical that you want to be. As control placed in a bottom element (bad UI) better keep this control in viewport (strange that chest Crome thinks so).
So just display:flex build all this magic :)
Please look examples
https://drive.google.com/file/d/1faTDwJBQEv-V96O8-HC-8R2_hXkGzsQJ/view?usp=sharing
UPDATE: also please remove
tabindex="0"
And use button instead div to get the same logic with the keyboard navigation.
On Video last Chrome
Google Chrome is up to date
Version 84.0.4147.89 (Official Build) (64-bit)
I'm having trouble with sizing a page. I'm resizing an image based on the height of the page. I don't want any scrolling on the page however on mobile devices the address bar is interfering. Sometimes the page gets the height without the address bar and puts in scroll bars other times it gets the height with the address bar and runs fine
Is there a way I can get the height of the page with the address bar? Or force it to show? (or force it to hide?)
Actually I had your problem, there are 2 ways to solve it, but they can't help you anywhere, on every browsers!!
WAY 1 :
Check this has everything you need
http://www.html5rocks.com/en/mobile/fullscreen/
The Chrome team has recently implemented a feature that tells the browser to launch the page fullscreen when the user has added it to the home screen. It is similar to the iOS Safari model.
<meta name="mobile-web-app-capable" content="yes">
WAY 2:
Using scroll and resize event on your window object to set height as same as your viewport anytime.
When viewing a web page on my mobile phone (Android default browser), there is an address bar at the top and a navigation bar at the bottom. These bars dissapear if I start to scroll down a but appear the moment I scroll back up to the top. Other browsers have similar operations and each bar has their own sizing and behavior.
I need to be able to get the height of the view-able part of my website (ie, the part between the 2 bars). When the bars retract or hide, I need to be able to detect the new height.
How can this be done?
if you are using jQuery you can get height of viewable part using
$(window).height()
and if you are using javascript you can get height by following code
window.innerHeight
I have tested this code with device Moto X.
I have a web app that needs to be within a container of a fixed size. I want that container to always be completely visible on the screen of mobile devices. (Particularly I care about iPads.) In my case, the container is 1000px wide by 650px tall. Essentially, I need something that would be the functional equivalent of <meta name="viewport" content="min-width=1000, min-height=650">. But min-width and min-height aren't valid in a viewport meta tag.
I already have the page laid out such that if the window or viewport has extra room the content is displayed centered on the page. I've tried using the orientationchange event to change the content attribute of my meta tag, but no luck. With some configurations that I've tried it loads correctly initially (sometimes, refreshing or reopening the page often yields different results) but upon changing orientation it becomes incorrect.
This is the closest I've come to getting it to work (in the window.onOrientationChange event):
var mvp = document.getElementById('myViewport');
if(window.innerWidth / window.innerHeight > 1000 / 650) {
mvp.setAttribute('content',"user-scalable=yes, height=650");
} else {
mvp.setAttribute('content',"user-scalable=yes, width=1000");
}
Where of course #myViewport is my viewport meta tag. This works correctly in portrait (although when switching back and forth I have to manually zoom back out,) but doesn't add the extra width needed to zoom out to see the full app height in landscape. Also, I'd prefer not to allow users to zoom in and out because of the nature of the app, and certainly don't want to require them to zoom out every time they change orientation.
If there is a way to force the zoom to always fit to screen, something akin to minimum-scale=auto, maximum-scale=auto, it seems like that would work (if I could get the width correct in landscape,) but I don't know of such a mechanism. I also tried using javascript to determine the scale, based on window.outerHeight or window.outerWidth depending on which one is the determining factor, but that wasn't successful either.
And please don't tell me that this is bad design, because the specs come from the client for their internal-use app and there's nothing I can do about them.
I'm trying to create a div that fills the entire viewport's width and height on a mobile device. The problem is, Mobile Safari and Android Browser have a navigation menu that disappears once the user begins interacting with the page. The navigation bar makes the viewport height smaller, but when it goes away, I can find no javascript event that I can listen to so I can get updated values for the viewport height and width.
Is there a JavaScript event that is fired when Mobile Safari's navigation menu retracts from view? I was hoping there was an event I could listen to instead of firing a timer every x milliseconds to check the viewport height.
Here is a chart that explains the terminology when I say "navigation bar"
Since the visible area is changed window.onresize should fire. Try:
window.onresize = function(event) { /* your stuff */ };