I am developing an iPhone App based on a UIWebView (hate it or love it). This page has a fixed width and pretty much static proportions. I have a few input textfields on this page, but whenever a user engages focus on one of these, the iPhone will zoom a bit in. Also, I can pinch-zoom on the web view.
How can I avoid that? I have Scaling: Scales Page To Fit and View Mode: Scale To Fill.
Thanks in advance.
You can try disabling it in a meta tag, like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
It is working for me
webViewHome.multipleTouchEnabled = NO;
And Change wkwebview property set "Aspect Fit " from "Scales to fill" in storyboard.
Related
I have a horizontal site and I want the site to always be 100% in height when viewed on a mobile device. I have set the viewport meta tag to -
<meta name="viewport" content="height=device-height, user-scalable=no">
which works fine on both portrait and landscape mode, however when I rotate the phone from portrait to landscape mode the site scale bigger than 100%. Unless I re-load the page (refresh won't work).
I found this link which explained why it does that - http://filamentgroup.com/examples/iosScaleBug/
and followed the instruction there and changed the meta tag to
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
This solved the orientation problem when switching from portrait to landscape mode but it doesn't scale the site to 100% height.
It's okay to disable the zoom functionality because I prefer to have zoom off.
Any suggestions to solve this problem?
Thanks
I know this is an old question but when trying to achieve what you are I tend to use the following code.
<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
Hope that helps
I am designing a mobile website and when I see my website in portrait view on iphone/ipod its layout, images everything is perfect but when I change to landscape view everything is showing a little bit zoomed-in. I have tried all the meta tag (viewport) attributes:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=1" />
What am I missing? I want to continue to allow users to zoom, I just don't want the orientation change to zoom my content in.
The guys behind jQuery Mobile have a solution to this. It works by checking the accelerometer data and disabling zoom while the device is changing orientation.
I have built a website that I thought was free from css errors until I test this on the iPhone. I have a strange problem in that the repeating background images do not stretch fully across the page.
This is what it looks like on an iPhone and full website URL:
Example website
Try this: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The problem is the same for if you reduce the width of your browser. The problem is the background IS stretching, but the website is only as wide as the stretched background image. The slidey bit below the logo has a fixed width though and is creating the illusion that the background isn't stretching far enough.
The above code should fix this issue by making sure that the website zooms to fit the width of the browser.
Turn off auto-scaling by setting a viewport meta tag to the head section of your HTML. This sets the width of your page to match the width of the display,
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Sadly adding the viewport to set the zoom to 100% was not what I was looking for.
After debugging further I found that the problem was being caused by the large banner image at the top. This was a larger width than the rest of the website, by changing this to a centered background image and adding overflow hidden to the container fixed all issues.
Anyone know how to prevent the zoom that happens when keyboard/spinner is displayed?
I do know that if you set meta tag viewport content to "user-scalable=no" then this zooming is not being done, but is there any way to prevent this anoying zoom without cutting all zooming functionality for users?
Thanks everybody!
After some testing I found out that depending on viewport size zoom is not made. I mean when having viewport:
<meta name="viewport" content="user-scalable=yes, width=280px" />
With no maximum-scale, nor initial-scale, then safari browser wont zoom in when keyboard/spinner is displayed.
I do not understand very well this behaviour, as I would say that logical width to avoid this zooming should be 320px...
I wont mark it as answer, just in case someone wants to add more light to this issue...
Prevent zooming all together by adding this meta tag to your head tag :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
more solutions:
https://blog.osmosys.asia/2017/01/05/prevent-ios-from-zooming-in-on-input-fields/
how to make content of a web page fully scaled whatever the width/height of the device visible portion is?
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
works as a meta tag as well, if you want to let users scale the site just do not use minimumscale, maximumscale and user-scalable attributes.
In iphone
webview.scalesPageToFit = YES;
All the best.