I have an app with editable webview. In Android O (8) Google added new feature Smart Text Selection:
https://developer.android.com/preview/api-overview.html#sh
I want to disable opening hyperlinks, google maps, dialler from smart text selection like:
I tried to add
<head>
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
</head>
but it doesn't work (smart selection menu item still appears). I need to disable only opening this 3 apps from webview content.
Do you now how to disable this new feature?
Thank you in advance.
Related
Hi I'm using primeng library with angular version 8.
I'm using 3 dropdowns and 1 calendar. And Only on iOS devices on mobile view When I choose an option from dropdown or click to choose a day on calendar, it zooms in.
I tested it with chrome, safari and firefox -> same issue on all the browsers
link to video
It's because of the font-size (built-in behavior of the browser for the pages with font-size less than 16px). You can add metatag to prevent this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
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.
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 been working on a jQueryMobile App wrapped in phonegap with fixed footer.
In windows8 phones, while changing the orientation to landscape mode, the fixed footer is not aligned correctly in landscape mode only. The footer seems to have a bottom padding like behavior in landscape mode. In Portrait mode, it is aligned perfectly.
I am using jquery.mobile-1.3.2, and Phonegap 2.7.0.
I have been trying the fixes mentioned in the below URL's, but did not help:
https://forum.jquery.com/topic/jquery-mobile-fixed-footer-not-at-the-bottom-on-windows-phone-7-and-8
stackoverflow.com/questions/16602585/jquery-mobile-position-fixed-in-windows-phone-8-and-viewport-height
gilesey.wordpress.com/2013/08/15/jquerymobilephonegap-hintshacks-for-windows-phone-8-0iosandroid/
Also tried some of the JS, jQM and CSS tricks, but no change affected for the footer.
A screen-shot of the page in Landscape mode is shown in the below link (You can see the black footer, even the footer text is not clearly visible):
http://goo.gl/8RICNG
For more clarity, a part of the header section is pasted below:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
And my App footer code is:
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-hide-during-focus="" class="footer-cls">
<div align="center" class="footer-txt"><script>document.write(footerText);</script></div>
</div>
Can any one please help me with a perfect work around as I am stuck with this issue?
Thanks in advance..
In Mainpage.xaml try changing the property
shell:SystemTray.IsVisible="True"
to
shell:SystemTray.IsVisible="False"
This will render the app in fullscreen mode and will reset your CSS to the entire page.This might fix your issue
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" />