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" />
Related
I have a responsive webpage that changes as the screen resolution changes, but for some reason, it loads the non-responsive version whenever I load the page on my iPhone:
http://rayku.com/register
The home page is fully responsive on the iPhone (http://rayku.com/home), but I'm not sure why the registration page isn't. Do you have any ideas?
I don't have an iPhone, so I can't test this, but it looks like you're missing a meta tag from your <head> tag. Try adding this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this works.
You're missing the viewport meta tag (which is correctly present on the home page).
<meta name="viewport" content="width=device-width, initial-scale=1">
I am working on a website: www.sc1.online-folio.com
for mobile and tablet devices I want to show this site 100 zoomed out (or maybe a little more) so user can see full site at first glance and zoom in the area he wants to view.
I am using this meta tag to zoom out
<meta name="viewport" content="width=1100" initial-scale=1.0, minimum-scale=1.0" />
I set the width 1100 so the website look a little zoomed out for better viewing of slider area. This is all working fine on android devices but on ipad and iphone the site is zoomed like this: http://www.responsimulator.com/?url=http%3A%2F%2Fsc1.online-folio.com%2F and no changes in meta properties are working.
So guys can you tell me what exactly I do to control the zooming on iphone and ipad devices.
You have written the attribute incorrectly, replace the quote after width with a comma.
So that:
<meta name="viewport" content="width=1100" initial-scale=1.0, minimum-scale=1.0" />
Becomes:
<meta name="viewport" content="width=1100, initial-scale=1.0, minimum-scale=1.0" />
But to answer your question, viewport is the thing!
I am having a problem finding the right viewport meta tag to use for a responsive site while restricting user scaling.
Currently I am using:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
I am getting some really weird issues on my iPad2. Upon orientation change, the layout for the previous orientation, including elements that should be hidden by media queries, is taken and posted over-top of the correct layout.
I appreciate any help.
Thanks,
just this and nothing else, remove the rest
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
Is there any way to prevent the application from zooming? My app has this annoying habit of zooming all way in when you focus on a text input (only on Android, using an HTC amaze).
Sure:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
I'm building a PhoneGap + JQuery Mobile app, but I can't seem to prevent it from zooming in with a double click. I followed the tips listed at http://www.tricedesigns.com/2012/01/17/mobile-web-phonegap-html-dev-tips/, specifically by adding:
<meta name="viewport" content="width=device-width, user-scalable=no" />
Does anyone know of a solution for zooming?
Try:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
This is what I use and I don't get any zooming behavior.
Here is the Apple documentation for the viewport meta tag: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Place "user-scalable=no" in to your meta tag
like this
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
This is the best way to stop zoom in mobile, Its work for me in phonegap
The accepted solution does not seem to work in iOS10, this does:
// stop ios bounce and zoom
document.ontouchmove = event => {
event.preventDefault();
};
This will stop move events reaching the root element/browser