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.
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)
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 the below html which is essentially 3 pages on 1 screen to allow for scrolling. Each of these 3 container divs have a height of 100%. It looks fine on desktop, but in mobile, the browser's address bar constantly hides itself when scrolling. This causes all the divs to change size since height with address bar is different than height without address bar. That makes things extremely jumpy and in general just a terrible experience.
How do 1) set the div to be 100% of the view assuming the address bar is not there and 2) make sure the address bar showing doesn't change the height of my divs?
I use 100% alot in my page...
<body>
<div id="top">
</div>
<div id="second">
</div>
<div id="third">
</div>
</body>
I found this link:
Background image jumps when address bar hides iOS/Android/Mobile Chrome
but it did not help me since $(window).height() changes when the address bar is there or not, and I also am not using a background image.
The mobile I am testing on is a mobile chrome browser on android 4.3 galaxy nexus
In case you're still having this issue, this might fix it.
Using the link you found, I found that referencing the body instead of a specific element helped to fix the height issue for the entire page and not just background images.
var bg = jQuery("body");
jQuery(window).resize("resizeBackground");
function resizeBackground() {
bg.height(jQuery(window).height());
}
resizeBackground();
I am working on mobile compatibility of a site for my third party product, and I am facing position fixed issue.I am fixing a footer to viewport's bottom.Android below 2.3 & iOS devices below 5 do not support position fixed.
For such devices currently I have fix that I am calculation current width of viewport and then apply width to footer by js.
But problem occurs when there is less content on site or client's site add auto zoom meta in head.In this case screen is zoomed and content inside of footer breaks.
I can't use iScroll because it locks zoom functionality , and I can't mess with client's page.
Please suggest me some logical solution to this problem.
Wrote custom function , which people used to use in ancient times (IE6 times).
It checks if browser supports position fixed or not.If not then adjusts its position according to scroll/zoom.
Try using
<meta name="viewport" content="width=device-width, initial-scale=1">
so the zooming does not occur at the page load - but it's still available to the user!
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.