I was struggling with having 2 finger events on touch devices.Finally I removed all the meta tags from my Html and it made the Android device to work , however I still have problem with iPad.
I read all the other threads about zoom in and tried different variation of this meta tag :
<meta name="viewport" content="
user-scalable=yes,
width=device-width,
initial-scale=1.0, maximum-scale=3.0, minimum-scale=0"/>
but none of them helped have scroll on iPad.
when I have this :
<meta name="viewport" content="user-scalable=yes" />
I get zoom on Android but still no 2 finger pinch or scroll on iPad.
I appreciate any help or suggestion on that.
Related
Consider the following snippet that should prevent zooming in and out on mobile devices
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1, width=device-width">
For ios 10 it no longer prevents zoom because of accessibility issues. So is the 300ms delay before firing click event back for ios 10? I check it for my website and it doesn't feel like there is performance downgrade. or is there?
Has Apple found a work around for this issue?
Mobile Safari is making some fonts bigger when I am rotating the phone.
That's is driving me crazy and I can't get rid of this behavior.
Read about -webkit-text-adjust-size and tried it with all possible combinations but it doesn't seem to work. Is there anything new added in iOS9?
Have you tried the META Viewport tag?
<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 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" />
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"/>