reload web app on orientation change - javascript

Simple problem. I have tried different search phrases. The most recent I tried is "reload web app on orientation change"
I KNOW or DEEPLY SUSPECT someone(s) have asked this question before on Stackoverflow but the search results do not answer my simple question.
1) I have a web site that renders fine on a smart phone when holding the phone in landscape view, until...
2) I re-orient the smartphone to a 'portrait' view position, where the phone is in the normal position with the long height of the phone is vertical
Then the web page is not using the whole screen. The page stays the exact same height as it was with the phone held 'sideways' in landscape mode. What I see is the page only using the top 2/5ths of the smartphone screen.
When I manually reload the page, the web page then completely fills the entire height of the screen.
I've added this and it changed nothing:
<meta name="viewport" content="height = [pixel_value | 'device-height'],
width = [pixel_value | 'device-width']" />
I prefer forcing a page reload or something ?? in javascript when the smart phone's orientation changes.
Because I know for a fact that when I reload the page after rotating the smart phone from landscape to portrait, then (and only then) will my web page use the whole height of the smart phone's screen.
I'm using only pure javascript.
How to reload my web pages in my web app when the smart phone's orientation is changed from landscape to portrait?

This is a very unsophisticated solution you are after but,
$( window ).resize(function() {
window.location.reload();
});
is a robust way to refresh the page when the user changes the orientation.
You can also use
screen.addEventListener("orientationchange", function() {
window.location.reload();
});
Generally you should make sure you write correct HTML/CSS if you want your webpage to be responsive is such settings instead of reverting to this kind of crude solutions

Related

Hide browser bar in mobile version

I am trying to hide the browser in mobile version and have tried to use below on load:
<script>
window.addEventListener("load",function() {
setTimeout(function(){
// This hides the address bar:
window.scrollTo(0, 5);
}, 0);
});
</script>
However this isn't working on my android device it is only scrolling down 5px and not hiding browser bar as if human scrolled down. I feel like this has something to do with viewport but can't figure.
I have tried to follow https://developers.google.com/web/fundamentals/native-hardware/fullscreen/ as well but I can only it make it work with click. I don't really want to go full screen really just hide browser as if user has scrolled down on load (if scrolled up than visible again).
I found a site that has something similar (https://www.webpagefx.com/blog/internet/interstitial-ads-google-hate/amp/) - this happens when you enter via link google search and before entry into site the browser bar has already been hidden, ie scrolled down to google search.
If anyone can help point to right direction that would be helpful so I canget started to code the script that I need. Ideal android and ios resolution (if not than just android)

Update screen size when in fullscreen and using mobile keyboard

That's quite a mouthful! I'm testing some things regarding web apps, so my test page goes fullscreen using webkitRequestFullscreen
I then decided to test how an <input type="text" /> would affect the fullscreen-ness. Sure enough the keyboard comes up just fine, but the content of the page is hidden behind it... including the input field the user would be typing in. Typing blind isn't fun.
I'm trying to figure out the screen size after the keyboard takes some of the space, so that I can adjust the page in such a way that the field becomes visible. However, properties like screen.height, window.innerWidth and the like all show full-screen values (360x640) regardless of the keyboard being present or not.
Are there any other ways of getting the screen size, while in fullscreen, and factoring in the virtual keyboard's presence?
Here's a demo, try in Chrome on mobile: link

How to detect if browser address bar is showing on iOS devices?

Is there a way to consistently detect if the browser address bar is showing?
We have a HTML5 app and want to show a special link if the address bar is showing, encouraging users to add the app to their home screen for a better experience.
You should take a look at the window.innerHeight property.
That is the height of the content on screen.
The value of that decrease a lot when the address bar is visible.
You may need to test out the decrease in height on different device to make that work better

Redirect to mobile page when width is too small

Since my website doesn't look good at all on a small screen, I want to create a JS function that redirects me to a mobile version of the page when width of the screen is smaller than or equal to 800px.
Here is the code for it:
if (screen.width <= 800) {
document.location ="index_mobile.html";
};
If the code works, then when I shrink down the browser window to 800px wide, the index_mobile.html should show up. But it is not showing up right now. Does anyone know what's going on?
http://jsfiddle.net/RZMmV/
Mobile browsers do not report or use the real device resolution because this would make basically all websites on the internet unusable.
What they do is creating a "virtual screen" that has a resolution that is closer to the resolution of a desktop PC and then will implement zooming on the page.
If you want to know the real device resolution you need to disable automatic scaling done on the device. For example for iOS and Android devices this can be done adding
<meta name="viewport"
content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
to the <head> section of your page. This informs the browser that the page has been designed for handling low-resolution devices and disables the virtual screen layer.
screen.width will return the width of the monitor, not the window, so you can't just shrink your browser window down to get a different value. To do that, you'll want to use window.outerWidth or something.

iPad orientation issue on a web page

I developed a web page for PC and I wanted it to be compatible for iPad as well. However I did not do specific additions to my page for iPad compatibility. I only added the meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1;" />
When I view the site in iPad landscape mode, on the page load, it looks good. But when I switch to Portrait mode, the page looks cut off. When I switch again to landscape mode, the page looks cut off still further.
What other practices should I follow to make my page iPad compatible.I'm looking for recommendations/best practices on using %widths and things like that.My elements are currently of maximum 954px. Should I necessarily use % widths for iPad compatability? Any other helpful tips?
initial-scale=1.0 means your page will load 'full size' which is too wide in landscape mode. If you use that meta tag, you would usually use it in combination of sizing the page width to the exact dimensions of the screen. Since you are not, I would not use that meta tag at all and let the iPad's browser load the page normally (the browser will handle fitting it to the screen for you).

Categories