To fix the auto scaling issues to render my webpage on an iOS device, I've added the viewport meta tag,
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum- scale=1,user-scalable=no">
and I've added device specific styling through media queries for iPhone and iPad, This fixed the scaling issues on switching between portrait/landscape orientations.
The problem now is that when I shift focus to an input field(bringing the keyboard up) and shifting to landscape orientation with the keyboard on(auto scaling happens fine) and when I switch orientation back to portrait mode(with the keyboard still on), the UI gets distorted, i.e., some extra length gets added to the viewport width which either appears as black area or part of the same viewport being repeated again. And if I bring down the keyboard and switch orientations again, the added space gets removed and the UI gets back to normal again. This happens only with the keyboard on. I'm using mobile safari as my browser.
I've been working with Mobile Safari for years now, and one thing I've learned -- it's so buggy when it comes to orientation changes when an input has focus.
Saying that, here's a small script that might help you out.
window.addEventListener('orientationchange', function(){
document.body.style.paddingRight = '1px';
setTimeout(function(){
document.body.style.paddingRight = '';
}, 50);
}, true);
This basically forces the browser to reflow/re-calculate the layout, which should hopefully address the situation you're seeing.
Fiddle with an easy to reproduce bug: https://jsfiddle.net/LYn54
Fiddle with the fix: https://jsfiddle.net/gQR4m
Hope this helps!
Related
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/
I have a problem with html5 app in ios7. It's easier to explain it at the screenshots:
At the start everything is fine - https://www.dropbox.com/s/x03b2blcqjptvpi/1.jpeg?dl=0
When I touch text input it's still ok (page scrolls down to the input)
After blur (when keyboard is hiding) the screen is scrolling back, but over 20px too much and it looks like this - https://www.dropbox.com/s/qpbbd1903tfb4qt/3.jpeg?dl=0
I've tried everything (including all possibilities of apple-mobile-web-app-status-bar-style meta tag) and it's still not working. I wonder why ios7 scrolls my app under status bar, even if at the start of the app it's ok. Does anyone have any idea?
This is similar issue with Focus on input field and orientation change messes up zoom level on iOS 6 Safari but link is for App, and not the site.
I have following meta tag (please note that zooming is purposely disabled - not my call, client's request :D)
<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0">
With zooming disabled and max-scale set to 1.0, orientation change works fine when you are just browsing the site. However, when you focus on input and change orientation, it starts to add some weird stuff on page.
When changing from:
portrait to landscape - iPad adds some black block at bottom of the page.
landscape to portrait - width of page gets wider. I inspected the element using mac and that whatever the space added is outside of html and shows up even with overflow: hidden; on both html and body tag.
Same issue happens on sign-in page of google - orientation change works perfectly fine when not focused on input fields, but when you focus on either email or password field and change orientation, iPad zooms in for some reason (you have to focus from portrait then once keyboard is visible, change orientation to landscape, it zooms in).
Luckily for Google, user is able to zoom-in and out but for me there's requirement from client that zooms has to be disabled.
Anyone have any workaround about this issue?
Thanks in advance!
I have found that this issue appears when page height is not set or set to 100%. I just set min height for page container.
I have a web page that doesn't (and shouldn't) allow zooming on the iPad. Everything works great, except in this scenario where multiple tabs are open in Safari:
1. have focus on my application's tab
2. change to a different tab
3. switch the iPad's orientation (i.e. portrait to landscape or vice versa)
4. switch back to my web apps tab
The iPad, in many instances, will have zoomed in and there is no way for me to reset the zoom. Since I have zoom disabled via the viewport meta tag the zoom shouldn't be changing. To make things even stranger: IF I REFRESH THE PAGE OR EVEN NAVIGATE TO SOME OTHER WEBSITE THE ZOOM WILL NOT REFRESH.
I've also noticed this occuring on other websites. I've tried every conceivable meta tag combination (that disables zooming). I'm testing with an iPad 3. If I only have one tab open in Safari I have no issues.
This doesn't seem to be related to the "famous" orientation issue as the undesirable zoom occurs when the application does not have focus
How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
Here is how I fixed this:
1. use the onorientationchange event to detect if the zoom is changed
2. if the zoom has changed change the viewport meta tag to: user-scalable=yes
3. on $(window).resize or onorientationchange change viewport back to user-scalable=no if the user has changed the zoom back to fit the screen
I am writing an app for IOS and Android using Flex 4.6. Everything is working fine on Android, but on IOS after the softkeyboard appears and the screen pans, when the keyboard is dismissed the screen never pans back down. The bottom half of the screen stays white and the top half remains shifted out of view. I have been searching online and through my code trying to figure out what could be wrong and I've had no luck. I have been running the program in debug mode, but no AS3 error messages are shown. My trace()s are printed, and the app will continue to work but obviously you are unable to interact with the top half of the app. Everything works fine if I set the softkeyboardBehavior in the XML to none, but then the user can't see where they are typing.
I have only been able to test this on my IPod touch with IOS 5.0.1. When I try to run my project in Flash Builders simulator neither the Android nor the IOS version will get past the splash screen.
Any help would be greatly appreciated
Thank you
I have seen that the softKeyboardDeactivate event from TextInput is not fired, as other actions that the unpan should cause are neither fired.
It seems it's a Flex 4.6 version bug. (http://forums.adobe.com/message/4068144).
I've found a workaround, it's a little tricky but it works.
Put a new TextInput hidden on top of the View, then on focusOut event on the original TextInput, force focus on the hidden TextInput. Softkeyboard event will be activated for that TextInput and the pan will return to the top of the View, then take off the focus from the new TextInput and the softkeyboard will disappear.
The user will not notice about this tricky solution.
<s:TextInput id="ghost" x="-100" y="0" width="0" height="0"/>
<!-- ... -->
<s:TextInput id="original" focusOut="textInputFocusOutHandler(event)"/>
...
public function textInputFocusOutHandler(event:FocusEvent):void
{
this.ghost.setFocus();
callLater(this.setFocus);
}
Try adding the "enter" attribute to your TextInput. It worked for me but now I have the issue where it jumps vs. pan when the soft keyboard deactivates.
It seems that my problem was that I was using the StageText skin for my text boxes, which adobe says in the documentation causes panning and any type of scrolling not to work. Switching to the old TextInput skin seems to fix the problem, but you loose all the native features for the soft keyboard, which pretty much ruins your user experience unfortunatly.