My responsive web app (made with Angular Material) works fine except with input fields on iOS / Safari: when the user focuses on an input field, iOS zooms the web page. Then the zoom level remains, breaking the responsiveness of the app (because then, the viewport becomes scrollable, and for instance the toolbar is no longer sticked to the top. Also, some elements supposed to be always visible on the left and on the right, are outside of the visible area due to the zoom).
I have followed recommendations given here and there, for instance https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/ and iOS Safari zoom on input box.
An almost working approach consists to use the following in the HTML header:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>
However this is not good enough in my case:
setting user-scalable=0 prevents the user to zoom the view
setting maximum-scale=1 also prevents the user to zoom on Chrome/Android (even if user-scalable=yes)
the trick with the "load" event (given in the 2nd link) does not work (I suspect because this is not called when changing page in a single-page application like Angular)
the trick using font-size=16px does not work for me (like many people also report).
Would anyone have a suggestion, to:
either prevent the focus on an input field to cause a zoom
or resetting the zoom to 1 after this operation
while letting users zoom the view manually if they wish to
?
Are any of your font sizes smaller than 16px?
You might be experiencing a browser behavior that isn't related to Angular Material.
My team experienced a similar problem. We found your question as part of our work. We eventually realized that the viewport zooming behavior that we saw had nothing to do with Angular Material. That's simply what iOS does when the font on an input field is less than 16px: https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ Any input field. Angular Material has nothing to do with it.
Related: Please note that disabling viewport zoom for mobile was standard practice for about a decade after the introduction of the iPhone, but it is no longer The Way. https://webkit.org/blog/7367/new-interaction-behaviors-in-ios-10/
Related
Iframe automatically goes full screen using Ionic 3.9.2 on iOS.
I've tried removing all the fullscreen tags. I notice that it is not happening anywhere else. Only happens on iOS. On other devices, I have to manually make it full screen.
Why does Iframe automatically go full screen on iOS?
<iframe src="https://d1mlukbqb3dh9w.cloudfront.net/PortraitCourse/Module01/Module01Section1/story.html" height="655" width="100%"></iframe>
A while ago I would have been able to provide you with a spot-on answer. Unfortunately I no longer have access to the resources I would need to do so... meaning my answer won't be a complete solution.
IFRAME, on iOS, works slightly differently than on Android. Getting an IFRAME to take only the height you want is not simply a matter of setting the HEIGHT property on the tag as the rendering engine works differently. You'll have to play around with CSS both in the container of the tag and in the contents of the body itself.
Try proceeding as follows:
prepare a mock target page that doesn't take all the height, make
its background red and see how much space it takes
make the mock page longer than the height of the screen by adding lots of text and images to it and observe the change
wrap the IFRAME in a DIV and set the style=height: xxx of the div, as well as its overflow.
wrap the contents of the mock page in a div, setting its height, overflow, position and display style
properties to control its appearance.
repeat step (4) with both the HTML and BODY tags of the mock page.
Playing with these in real-time using Safari to alter their values will prove most useful. It was to me at least, when I had the problem over an year ago.
I am building a mobile web app that uses jQuery and hammer.js for touch controls. hammer.js has a feature called "prevent_default" which turns off Safari's scrolling/zooming/prettymucheverything. I have a page with a form using < input > for text fields, and a javascript listener that calls .focus() when you tap the form.
This all works well up until a point. The page is fixed in place and looks real pretty, and when you click on a form field it zooms in and the iOS keyboard appears. The problem is that when the user is done entering text, there is no way to zoom out. The browser is so zoomed in from .focus() that the browser bar is gone and you have to close the browser tab and re-type in the URL instead of refreshing.
I am looking for a way to force the browser to zoom out back to the initial view. I've looked all over the internet for some solution but have yet to find anything.
I have the viewport meta tags in the header to disable zooming from the beginning, but is not useful in solving this issue
A hacky solution is to focus and blur an inputfield after you have changed the viewport attributes.
function refreshViewportZoom(){
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=0.5, maximum-scale=0.5, scale=0.5, user-zoom=0.5, zoom=0.5');
document.getElementById('myInputField').focus();
setTimeout(blurLater,2000);
}
function blurLater(){
document.getElementById('myInputField').blur();
}
The blurLater is needed as a function, because Safari seems to look ahead and ignore it otherwise.
We are working on an application by using jQuery Mobile Framework. So far app working really fine, and now we are thinking about to use "media queries" conditional CSS scripts for different size of browser window.
Our idea is that, when someone access our app form mobile browser like iPhone/Android/Windows phone - they can view full width and full height. But when someone access from a regular desktop browser and it's width more than 800 PX , we need to re-size our app both width and height.
Issue is that, we want to set re-sized app window over an iPhone background & currently background position is fixed. I'd tried thousands of time for re-sizing width and height and able to re-sized width but can't re-sized height. Also, I need to change the position of our apps over the background.
Can any one suggest me how to change the height of JQM window?
Waiting for expert opinion.
Check to see if it may have to do with the viewport setting. I think we need some more details. It's a bit confusing on what you are actually asking.
I think the Viewpoint will handle the width and the content should handle the height of the page. I think there is a default for height as well.
Viewport meta tag Note above that there is a meta viewport tag in the head to specify how the browser should display the page zoom level
and dimensions. If this isn't set, many mobile browsers will use a
"virtual" page width around 900 pixels to make it work well with
existing desktop sites but the screens may look zoomed out and too
wide. By setting the viewport attributes to
content="width=device-width, initial-scale=1", the width will be
set to the pixel width of the device screen.
<meta name="viewport" content="width=device-width, initial-scale=1">
These settings do not disable the user's ability to zoom the pages,
which is nice from an accessibility perspective. There is a minor
issue in iOS that doesn't properly set the width when changing
orientations with these viewport settings, but this will hopefully be
fixed a a future release. You can set other viewport values to disable
zooming if required since this is part of your page content, not the
library.
http://jquerymobile.com/test/docs/pages/page-anatomy.html
Also there is a gradeA global config option but not sure if this will help:
http://jquerymobile.com/test/docs/api/globalconfig.html
http://jquerymobile.com/test/docs/about/platforms.html
gradeA function that returns a boolean, default: a function returning the value of $.support.mediaquery Any support conditions
that must be met in order to proceed.
jQM offers Media Helpers but it's been deprecated but you can still download it and use it yourself.
http://jquerymobile.com/test/docs/api/mediahelpers.html
They suggest using response.js developed by Scott Jehl (jQM Team member)
I've observed this on iOS 4.3 to 5.0. When you create a even a simple offline web app, meaning one HTML file + few assets such as CSS and JS (all present in the cache manifest), it works offline (I tested in Airplane Mode) – BUT, when you add such an app to your home screen and open it in fullscreen mode, it first displays initial content, then everything disappears (page becomes white) for half a second or more, then content reappears again.
You can see this by adding Glyphboard, a well-known and useful offline web app, to your iOS home screen and launching it a few times. You should see the white flash effect every time you load it.
This is a big problem because it gives away the non-nativeness of an app and gives the impression that the app is non-optimized for performance and buggy.
I've tried finding reports about this but all I can find is rumors and misconceptions about the iOS 4.3 JavaScript rendering engine fiasco, which doesn't need at all be related to this issue. But in iOS version 3 I distincly remember not ever seeing the white flash.
Clearing the screen and other artifacts while rendering is a common issue of HTML rendering due to the progressive nature of HTML. The concept is that the browser should draw as early and often as possible and render styles/scripts/content as they become available. It's possible the markup has an issue where all rendering is delayed until some content or a script is available. This could happen if:
You have dynamic heights based on image dimensions but you haven't
set the image dimensions in the markup or CSS.
Your layout is based on tables and you aren't using 'table-layout:fixed` in CSS.
Your HTML uses inline scripts with document.write().
You have some kind of onLoad() function that reveals/modifies content.
You link to an external stylesheet.
You're using uncacheable external content or you've disabled caching.
You're using external content that's returning 404 or isn't available offline.
Has your HTML/CSS changed between testing IOS versions?
I've found this to be caused by the use of:
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
With a minimal page, I get a white flash between the apple-touch-startup-image and the page contents if I use the viewport meta tag. If I take out the tag, no flash.
It's possible to work around the problem by setting the tag programatically.
I think what happens here is that iOS takes a screenshot from the page when it is added to the main menu. Then this screenshot is displayed during the application loads (WebKit loads). WebKit starts rendering the page and the page itself is constructed in such a way that the page content is not instantly available, leading to a white flash which is a rendered page when page content is not yet there,
You can avoid the problem to a certain level by building your JS/CSS so that it loads the initial HTML view fast and then lazily loads / builds the rest of the resources on the background. Also you can set a custom loading screen instead of the default screenshot iOS uses from the page.
Maybe if you can take yourself a screenshot of your app and then have something like this:
<body style="background: white url('my-initial-loading-screen.png')" />
... and make sure image is available and comes from manifest.
Or even better, have loading screen which does not require any external resources to show (just plain HTML) so you know the browser doesn't need to load anything.
PLEASE NOTE: This is not a "use two fingers to scroll" problem. Whether it is one finger, or two, or three, or the whole hand, for some reason our iframe does not scroll on an iPad. :)
Here is the scenario:
In our web application, which is built using EXT-GWT, we have a few windows that open as (maximized) pop-ups and present some forms to the users. These forms, which are most of the times external, are rendered in an iFrame and some of the forms have their content collapsed at the initial load - the user can choose to expand any section of the form, fill it in and submit. Now everything works fine except the scrolling in iPad. After the iframe's content is loaded and collapsed (collapsing is done using JS on the client side, basically, the content loads as expanded by default and then is collapsed by JS) iPad just fails to provide scolling to the iframe. Even after the content of the iframe is expanded the iframe does not get any scrolling.
As of now, we have solved this problem by increasing the height (using JavaScript) of the EXT-GWT window to the size of the expanded iframe body content. This makes the whole window scrollable, instead of just the iframe within the window. While it works, the window becomes way to big, so I was wondering if there is any better way for us to provide scrolling to the iframe.
Thanks for the help,
Nitin
For iOS devices you need set overflow: auto; or the scrolling won't work. For my web apps I used fancybox to display iframes modally and once I change the overflow setting in the css file the two finger scroll worked perfectly on the iPad.
After trying (almost) everything, I have come to the conclusion that increasing the GWT window height to the iframe.body.height is the only solution for getting the window/iframe to scroll on iPad. Hopefully, this will help someone in future.
I´m pretty new to GWT, but for me it worked like this:
The parent-div of the iframe has a class in my case, x-component.
I made an entry to my css file like this:
.x-component{-webkit-overflow-scrolling: touch; overflow:auto;}
It works as well if I set these entries not to the class, but to the div-element itself.
Hope that helps