I have set the following viewport tag in html file using UIWebView.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
Now, when user piches out, I get this effect as shown in the image.
I want to disable this effect but still have the ability to zoom in.
Tried by setting UIWebView's bounce to NO, but still this problem persists.
Thanks.
You can do it by using bouncesZoom property of UIScrollView(property of UIWebView) as below-
[webView.scrollView setBouncesZoom:NO];
Related
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Due to the fact that user-scalable=no means we do not let the user zoom in or out of the page. Then why do we need to use initial-scale=1.0 and maximum-scale=1.0? Is it necessary to use them?
Your intuition is correct, maximum-scale=1.0 is unneeded since the page can't be zoomed anyway. Setting minimum-scale=1.0, maximum-scale=1.0 is a common pattern that's almost equivalent to user-scalable=no. Almost because some browsers will load the page at a scale such that all content width is visible (e.g. Chrome on Android does this) so the user may start off at a scale that's not 1.0 and can't zoom. However, adding initial-scale=1.0 forces the zoom to 1.0.
I have a section of my website that should be hidden when a user scrolls like:
$( window ).scroll(function() {
$('header').addClass('colapsed');
});
The viewport is set to prevent scaling like:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
But whenever the orientation changes on iOS my on scroll callback is being called. Any idea how to overcome this?
PS: It works fine on Android
Keep track of the most recent orientation change. In your scroll callback, check if the current orientation matches the previous orientation; if it doesn't match, you know it's an orientation change so you can ignore it.
I have one issue regarding ipad design i use one slider in to that when i turns mode portrate to landscape then it is not taking width of landscape
It takes width of Portrate mode and we have to reload the site to see perfect in to landscape mode i don`t want to reload site can anyone help me out form this issue
Use proper meta tags in your header. Try this.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
In Bootstrap 3, there seems to have been an issue with the fluid grid causing a horizontal scrollbar to appear on small devices. My question is different...
I'm not getting any scrollbar, unless I click a text input. On an iPhone, there is an automatic zoom on the current field. This is ok (I guess), but after leaving the field, the zoom is not removed, so the content is clipped and there's an ugly horizontal scrollbar.
Is there a way to prevent the zoom? Or maybe tell mobile safari to set the zoom back to what it was?
First: you can create fluid-responsive tables. But you do not need it. If you don't give the <table> the class="responsive" the horizontal scroolbar doesn´t appear.
If you want to disable the zoom on small devices use this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Hope, it helps :)
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" />