I created a web-app a couple years ago (JS/CSS/HTML over a LAMP backend) which has been working fine. The client is now using it on his iPhone, and reports that when on a login screen with 2 inputs, the window zooms in 'too much' and when he's done entering input, it doesn't zoom back to the 'normal' zoom level (from screengrabs he sent, it looks like it zooms back to somewhere between 'normal' and the zoom level used when typing into the input).
Is it possible to control either behavior? I've read about the meta of user-scalable:0 but that sounds like it'd either A) not work at all or B) prevent zooming altogether.
I'd say the second issue is more critical (after the user inputs text, it should zoom back to 'normal' scale).
i'll mention again this is a generic web-app and not an 'iPhone app' (it's built on traditional web technologies, not Cocoa or Objective-C). I don't even own an iPhone, or a Mac that I can use an emulator on, and the windows emulators I've seen seem to be nothing more than iframes in a graphic.
thanks
If you leave user zooming option, it is up to him to go back to website original zoom scale. Iphone safary browser in portrait mode makes a zoom-in, everytime keyboard or combobox is opened. Then it does not zoom back to original scale (it has to be done by double tapping the screen or pinching the screen...).
Other option is not letting the user zooming with viewport meta tag
<meta name="viewport" id="view" content="user-scalable=no, width=device-width, initial-scale=1.0" />
Then iphone wont zoom when keyboard is opened or when spinner is opened
Im currently looking for a way of solving it (merge zooming possibility with avoiding zoom when keyboard opens), but I did not find any way to do it...
I solved it playing with viewport: As you said, when there is not user zoom enabled then openning keyboard or combo does not make zoom, but then you loose zooming feature for users.
I disable zoom on viewport when a combo is selected and then I restore zoom option after one second:
document.documentElement.addEventListener("touchstart", function (event) {
if((event.target.nodeName == "SELECT") || (event.target.nodeName == "INPUT") || (event.target.nodeName == "TEXTAREA")) { //it is a combo
document.getElementById("view").setAttribute('content', 'width=device-width, user-scalable=no');
setTimeout(function () {
document.getElementById("view").setAttribute('content', 'width=device-width, user-scalable=yes');
}, 1000);
}
}, true);
Not to say that my viewport has "view" as id.
Yes, I know it is not best solution, but it works...
Related
The problem: I'm working hard to implement a responsive UI in my app. But the keyboard IME on Android squishes my entire page layout into a frame that's about 96 pixels high when in landscape orientation. Typically this means that the input control being edited is not visible in the space above the IME. And one cannot edit a value that's not visible in Chromium. I'm assuming iOS has the same problem.
Setting a minimum height for the page helps. But the Chromium scroll-into-view implementation is not robust enough to keep up with some of the more complex page rewrites that are triggered by a change in window size in my app.
Ideally, I'd like to run the keyboard IME in "extract" mode, where the page is entirely hidden, and only the value being edited is displayed in the space above the IME. But as far as I can tell, there's no way to do that, even in Android native apps. Chromium never runs the keyboard IME in "extract" mode, even in landscape orientation.
The solution I'm current implementing: simulate "extract" IME mode by perform editing of values in a full-screen dialog that contains nothing but a single dedicated <input>.
The question is: how should I detect when to use this solution. it's easy enough to check the browser's navigator.userAgent. The Mozilla foundation recommends checking for /Mobi|Android/ (although I've seen solutions that have 40 or 50 patterns). But I'm wondering whether there's a feature-driven way to check for this instead -- something more along the lines of if ("geolocation" in navigator) ....
But as far as I can tell, there are no features related to whether and how a keyboard IME will change the layout of a page. If there are, I'd like to know. The "feature" I'm looking for is something along the lines of "Will this browser lay out my entire page in a frame that's 96 pixels high (in landscape) whenever an input control gets focus". But "does this browser uses a keyboard IME" would be satisfactory.
Any ideas appreciated.
I have a web application that is essentially a map (mapbox) with some d3.js points overlayed, filters, etc.
My issue is that when zooming in on the map using pinch (mobile), when I accidentally pinch over one of the points, or one of the map pop-ups, the entire page zooms (i.e. scaling). This is a fairly common occurrence. I only want user to be able to zoom the map, not the page itself.
I've implemented:
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I also tried user-scalable=0
And still the behavior persists. I've also tried this:
document.addEventListener("touchstart", function(e){
e.preventDefault();
},{passive: false});
document.getElementById('map')
.addEventListener('touchstart', function(e){e.stopPropagation()}, false);
But this is cumbersome and doesn't exactly work the greatest because it involved limiting event-listeners one element at a time. Shouldn't the user-scalable argument in the HTML be enough? I don't understand why this is happening.
Mobile browsers have no effect on user scalable because they over ride it to get people responsive experience on the mobiles.
Sites like google maps also zoom when we pinch in the site(expanding the ui elements as well as the map)
One way to override this response is to detect the pinch gesture and then re zoom the page to the normal level by a function such as:
function toggleZoomScreen() {document.body.style.zoom = "100%”;}
Shouldn't the user-scalable argument in the HTML be enough?
Depends on the browser/device. There are not many legitimately cases where zooming should be disallowed, so browsers will ignore it. Some browsers like Safari uses heuristics based on text size to decide if it should zoom or not... (where the solution is to set font-size to 17px or higher on input elements to prevent zoom)
First strategy would be to call preventDefault() on all mouse
events, like mouseup, mousedown, et.al (not just the touch events)
until you are able to block the zoom.
Second strategy is to take into account the zoom and scale the
images and point locations by the amount of zoom...
(Probably also want to take into account window.devicePixelRatio when scaling.)
Problem: If a mobile browser zooms in on something, say a login input, then the input fades away to a html canvas, the user can't use their taps or drags to have any effect on the html canvas too zoom out or move around. This means if the screen is zoomed in, there's no way for the user to zoom out unless there is a different html object sitting over the canvas for the user to tap.
Desired solution: javascript code that allows the canvas to function like other divs when tapped on or dragged (for zooming in/out and navigating while zoomed)
Acceptable solution: A javascript function to have the browser zoom out to the documents original size. - OR - A way to use CSS to make sure the browser doesn't zoom in on the canvas.
Not acceptable: disable zooming in or out on the entire page.
Using chrome and iphone safari.
Update
if ( viewport ) {
viewport.content = "initial-scale=0.1";
viewport.content = "width="+screenW;
}
After selecting the viewport, this code manages to zoom out google chrome's rendition of an mobile phone, but this does not work on my iphone 7.
I'm doing a chatroom somewhat simular in style(not really a clone) to iphone sms, however I when used on an actual mobile device the text input gets centered on the screen and zoomed in, making it impractical for those devices. How can I cause the text input to be closer to(or better yet underneath) the virtual keyboard instead of centered in the screen. I don't have any none-ios devices to try this on but I assume simular problems occurs on other webkit mobile browsers.
and for a bonus question, any way to make the keyboard go away when enter is pressed or check for the done button being pressed?
Thanks!
Add this to your header:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
This will prevent zooming in onfocus. Try adding user-scalable=no as well if that doesn't help.
As for hiding the keyboard, all you need to do is force the input to lose focus.
element.blur();
I have a site that uses a jQuery UI slider.
I fired it up in my iPhone, and realised that when trying to drag the slider (by dragging my finger over it), it scrolls the site left to right and leaves the slider unaltered.
It appears I can only slide when the site is at a zoom level that shows the entire page. I think you can force this zoom level with a meta element. However, the site's content is quite illegible at this zoom level (at least on an iPhone's screen).
What is the quickest way to get around this? Is it possible, on mousedown (I guess the iPhone will fire this when the finger is placed on it) to zoom the site to fit-all so the user can actually use the slider?
And if the quickest way is hacky/ugly, what are some better solutions?
I am using jQuery.
Many thanks!
Try adding this meta-tag
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
I copied it from mrdoob's harmony webapp. I know that when you open his harmony app from android webkit browser, you can still draw around by sliding your finger. It doesn't make the entire web page slide.
Do you have to use the slider element? I also use the slider element on a site but if javascript is disabled or not available, I show two selectboxes instead of the slider.