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.
Related
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.
I currently have an image on my site which is a lot larger than usual, but the website cuts off the image at each side dependant on the width of each users monitor, which is fine.
However, on an iPad/mobile device, the whole image is always showing, which is pushing the whole site to the left and also leaving a large area of white space to the right.
Any advice on how to ensure the iPad cuts off the image as the web browsers are doing would be appreciated.
I have used the following in my header
<meta name="viewport" content="user-scalable=yes, width=980px">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=980">
Many thanks
Put this at the time of your of definition of UIWebView
webView.frame=self.view.bounds;
webView.scalesPageToFit = YES;
So user will zoom in and zoom out according to his/her need to read the content.
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/