This issue has been discussed here before, however, I don't get the suggested solution to work.
I want to change the scale / zoom of a webpage on a mobile safari via JS. The solution suggested by
How can I use JavaScript to set the zoom level on mobile safari?
Mobile Safari Web App Zoom issue
Is is possible to change page zoom in Mobile Safari via Javascript?
is to set the "viewport" meta tag.
I tried this, but the scale is not changed.
$('meta[name="viewport"]').attr('content', 'width=device-width, user-scalable:no');
When does safari interpret the viewport setting? Only when loading a page or also when the value is changed programmatically (what I would expect with repsect to the answers of the questions mentioned above)?
Did this behaviour change in some iOS version?
BTW: Where can a find a list of recognized arguments for viewport?
Many thanks for any suggestion!
Related
We are working on a webpage that is currently having issues with split screen resizing.
When we change the orientation of the page on a mobile browser or do a window resize on a desktop browser, we are able to run the required updates fine because we listen to the resize and orientationchange events that get fired with either type of event.
However, we just realized that with split screen on Android (and possibly split screen on iOS tablets), we aren't triggering any resize events for the window and therefore can't do proper updating of our elements based on the split screen being activated or updated (when the user moves the split).
Is this something we can work around or am I just completely missing some functionality that I should be using?
I have looked around online and haven't found anything related so far that I could use from our JS.
Thanks! Any pointers would be greatly appreciated.
Information about Multi-Window Feature in Android - doesn't go over any possible ways to detect it from a web view though, but looks at it from an Android app dev perspective
I have a problem, trying to scroll window while touching mobile canvas. This only happens for Android Chrome, and works on ios Chrome and default mobile web browsers.
I don't know where the problem is because of getting the canvas applied to a surface by a 3rd party client, and i'm not able to modify that code.
Any suggestion?
Defining an own scroll function would be one.
I found the reason for this, and no longer need a answer.
The canvas had the style attribute touch-action: none.
This question already has answers here:
How do you detect between a Desktop and Mobile Chrome User Agent?
(2 answers)
Closed 6 years ago.
I'd like to detect Chrome on mobile devices only e.g Chrome for Android, Chrome for iOS. What's a reliable way to do this?
EDIT 1: In case you're wondering why...
The mobile version of Chrome annoyingly changes the viewport height when the address bar shows/hides. Because my site relies so heavily on vh units, the user experience while scrolling on Chrome for Android and Chrome for iOS is ugly.
My solution is to wrap the entire site in a limited height container and relegate the scrolling to it. This prevents the window from scrolling, thus preventing the address bar from hiding. The only problem is that on desktop browsers scrolling becomes problematic because my layout contains fixed elements that obscure the wrapping container's scrollbar. Seeing as I may not ever find a solution to that problem, the best way forward for me is to detect Chrome on mobile devices, and apply the new layout only then.
EDIT 2:
The answers given in this question do not work for me. They detect Chrome even on Safari and the stock browser.
Search in user-agent-string and look for Chrome and (Android or iOS).
More info: http://www.useragentstring.com/
I'm developing one-page site (webapp in fact). When I tested it on a mobile device, I noticed that mobile browsers change zoom lvl after orientation change. Unfortunately I can't just set user-scalable to 0. Is any other way to get rid of this problem? I think maybe I can do my own zoom mechanizm via HammerJS, and then set user-scalable to 0, but it work slow and jerky... Any idea, how resolve this?
P.S.
I use AngularJS as my framework, and HammerJS to manipulate other touch events
Has anyone had issues with the viewport tag since the iOS7 update? I have a few sites that now have this white margin on the right side. I adjusted the initial scale to 0.1 and it fit the iPhone just fine but on an iPad 3 it was tiny, which makes sense given the low scale.
I didn't have this issue until the update and I can't find any documentation out there regarding any changes to how safari handles the viewport meta tag.
Seems like iOS 7 is a bit buggy using meta description.
I sometimes need to reload me website to be displayed all right.
Maybe Apple will fix that with iOS 7.1. There are a few other bugs as well.
Do you have multiple viewport tags? If so, combine them into a single tag, per this other answer.