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">
Related
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've stumbled across this strange Meteor JS behaviour when using the following meta tag in the head:
<meta name="viewport" content="width=device-width, initial-scale=1">
When tapping anywhere on the body in iOS Safari some kind of click/touch event is triggered. It's clearly visible because it creates and outline/highlight on the body just like it would for a normal link when it's clicked.
For a demo open this link on your iPhone:
http://metaviewportissue.meteor.com and click anywhere on the body.
Code is here:
https://github.com/st3phan/meteorviewportissue
When I remove the meta viewport tag the click/touch event on the body is gone.
Does someone know what's going on here and maybe how to get rid of this strange behaviour?
Versions:
Meteor 1.0
Safari 8.1
I am developing a mobile web site using Sencha Touch. In iOS7 Safari I cannot make the top address bar & the toolbar below go away. Sencha used to handle this upto iOS6 but some recent changes in iOS7 is causing this issue.
http://java.dzone.com/articles/safari-ios-7-and-html5
I read the above link & it seems this is also an issue for HTML5 Games & a few other apps.
The old window.scrollTo() which worked for iOS6 no longer works.
Add minimal-ui in your meta tag viewport, this will hide he address bar and browser controls in safari iOS7:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
More info on iOS7 and fullscreen mode for mobile websites: http://blog.initlabs.com/post/81716286465/how-to-display-websites-in-fullscreen-mode-in-ios7
With iOS 7 I don't think you really have a choice. Obviously Apple doesn't want developers doing this anymore, and even if someone finds another workaround it probably won't stick around for that long.
Honestly, I think getting fullscreen functionality is a fair trade off for users to install the app to their home screen. Obviously there are certain cases where this isn't true, but I guess I find it understandable to some degree. You should still be able to add the following meta tag and it will be fullscreen once added to home screen:
<meta name="apple-mobile-web-app-capable" content="yes">
There are a few nice libraries out there that add an "add to homescreen" prompt that you can set up to be rather unobtrusive with custom messages. In this case, might be best to embrace the change...
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" />
it's possible with jquery or metatag remove the automatic resize in my website when i visit it on ipad? Is there a way to preveni this action of safari ipad?
I've come across the metatag "viewport".
I use it to strictly define the size of mobile websites and prevent scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
By changing the width I expect you can force your website to a given width on all devices.
By querying the device using Javascript navigator.useragent you can restrict this to just iPad.
if (navigator.userAgent.match(/iPad/i)) ...