I've added meta tags to my web app to make it fullscreen if added to the iPhone home, it works but only on the first page visited (If I add page 2 to my home, page 2 won't have the address bar, but any new page will). When I navigate to a new page, it shows a bar with the address, option to close (return to previous page) and read options. I'm using turbolinks, if I disable it, when I click on any link (a simple <a href="page.html">) it opens up Safari instead of staying in the web app.
Is there any way to keep navigation within the home app?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Yes, you should add a manifest (see: https://web.dev/add-manifest/) and make sure it holds the 'scope' directive. Set it to - at least - your domainname or a / if you want to make it relative.
Related
I have created numerous resolutions of apple-touch-iconfor my website. This means when someone adds my website to their Apple device Home Screen it has that icon. However when you click the icon it opens in a standalone window, rather than in the Safari browser.
I have tried using <meta name="apple-mobile-web-app-capable" content="no">but this doesn't seem to do anything.
Is there a way of preventing this from happening and make the webpage open in Safari only?
I think I found a way. Remove these lines from <head> section:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
And remove minimal-ui from:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
(if defined)
Here is the source: https://discussions.apple.com/thread/5967053?tstart=0
If your app doesn't have that <meta> tags it should open directly inside Safari (at least mine does).
I have a responsive webpage that changes as the screen resolution changes, but for some reason, it loads the non-responsive version whenever I load the page on my iPhone:
http://rayku.com/register
The home page is fully responsive on the iPhone (http://rayku.com/home), but I'm not sure why the registration page isn't. Do you have any ideas?
I don't have an iPhone, so I can't test this, but it looks like you're missing a meta tag from your <head> tag. Try adding this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this works.
You're missing the viewport meta tag (which is correctly present on the home page).
<meta name="viewport" content="width=device-width, initial-scale=1">
I have button as "Open In Safari". On clicking this button, same button get opened in safari in iPhone app.
However for UIWebView I have,
myWebView.scalesPageToFit = NO;
I want to apply SAME for safari too.
I am saying bcz the page looks ugly in safari when I have not applied scalesPageToFit.
Any idea how to get this done?
Answer
Below line in html file did the trick.
<meta name="viewport" content="width=320, initial-scale=1, user-scalable=yes">
Reference
Below line in html file did the trick.
<meta name="viewport" content="width=320, initial-scale=1, user-scalable=yes">
Reference
I have use phonegap+jquerymobile to develop my mobile application.
I noticed condition below:
(step.1)I tap an textarea to input something
(step.2)I tap a select button with ios form control(prev/next), then the style change greatly. All the elements has been zoomed in.
I test my application in andriod. However, everything works as expect.The condition only shows in IOS.
Any idea? thanks a lot.
To prevent zoom when input element is selected use this viewport meta tag:
Android:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
iOS:
<meta name="viewport" content="width=device-width,user-scalable=0" />
I have a web app running on Safari on an iPad. I am starting the app from the iPad home page. I want the app to start in full-screen mode, and to continue running in full-screen mode (i.e. not showing the Safari address bar).
I want to prevent the "pinch-to-zoom" and pan/zoom functions so the page always remains static. How do I do this?
If you put the following meta tag into the html output and then start the app from the homepage then it will be fullscreen when it runs:
<meta name="apple-mobile-web-app-capable" content="yes">
The following is to prevent the user from zooming:
<meta name="viewport" content="width=device-width,user-scalable=no">