On a webpage viewed on an iOS device I would like to use JavaScript to detect if the address bar is currently showing. Or if I could detect if the page was launched from the home screen or not.
The main goal I have is to add instructions how to add to the home screen if they didn't launch the page from there then hide the instructions otherwise.
I found the answer you can check against "window.navigator.standalone" for iOS to see if the user has the app loaded in full screen mode.
More info here.
Related
I have a multi page website. I add it to home screen in iPhone using "add to home screen" button in Share menu.
When I open it using the icon in the home screen, the website shows full screen. But when I go to any sub-page with a different route, like example.com/page, I see gray bars at the top and bottom, showing the address, navigation back and forward, "Done" button, share button, open in safari button.
How can I make it display full screen all the time?
Changing routing to use # is not an option.
It worked at some point in the past, but I had to remove the app, and can't make it work again
I figured it out myself, it turns out that recently I removed manifest.json from the html file. Adding it back solved the problem!
Also, I found this page helpful in figuring out how manifest works https://web.dev/add-manifest/
I am facing UX issue when the user locks device on the product listing page then returns to browsing a search page. It opens the search bar by default.
This is ReactJs base project and this only appears on Android mobile using chrome browser.
Found the after investigation and this issue already exists in Mobify.
https://www.merlinspotions.com/
Thanks.
I have a responsive webApp which is accessible from both Web Browser and Mobile browser. I want to hide the address bar once the application loads and this will continue in every other page of the application so that it feels like an APP. Can it be achieved through Javascript?
Well if you are planning to add some extra config in your responsive web app, then you can do it. Take a look at Progressive Web App. In this type user have the option to "Add to homescreen" for any mobile device. Then the address bar will be hidden for this kind of app.
The main thing you have to add in the Manifest.
Hope this helps.
If by 'address bar' you mean the top bar where you enter the website url, then no: you cannot modify the appearance of the browser just by javascript.
You used to be able to open a window without the address bar through javascript, but for security reasons that is no longer possible as users should be able to see on what domain they're on.
Most mobile browsers already have this kind of behaviour by the way, where they hide the address bar once you're scrolling the web page...
You can set your website in full screen mode using this method your address bar will hide automatically.
You can set browser as full width using JQuery OR Meta Tags, Please refer this link.
It will help you.
Thanks
First see the web site template http://thevectorlab.net/theme/?theme=Admin%20Lab
this web site template made a provision to resize the site at run time for desktop mobile and tablet when click occur on relevant buttons. see the link and see there are few button at top left where user click to resize the site and see how web site look like when user visit the site from mobile or tablet, desktop etc.
suppose i want to develop a site where i will provide 3 buttons where user click and my web site will resize at run time for desktop mobile and tablet. so user can see and feel how the site look like when user visit the site from mobile or tablet, desktop etc.
so tell me how could i develop such dynamic resize functionality with multiple button when user click on any. thanks
I am doing a web application which allows users to build pages. In addition to building pages, I will need to show how a page looks like on cellphone, tablet, and desktop without a user actually opening a browser of different viewport sizes to see how it looks.
Here is what I am planning to do a page as follows:
The page has two parts.
The top part contains three buttons labeled as cellphone, tablet, and desktop
The lower part show the actual user page.
Clicking on any of the buttons will show, in the lower part, how a user page looks like on the type of device corresponding to the type represented by a button.
I know that I have to use Javascript for this implementation, but I have no idea where to start.
Any thoughts/links/pointers are really appreciated.
Thanks and regards.
In Chrome you can emulate any size/screen size by opening developer tools and clicking the phone icon next to the magnifying glass in the top left corner. Here's some docs explaining it https://developer.chrome.com/devtools/docs/device-mode