I have a UIWebView shown in an iPad screen (iOS7, landscape). The web page is exactly 1024 x 768.
If I inspect the view at runtime (using revealapp.com) I can see the width of the UIWebView is 1024px. However, it contains a UIWebBrowserView within it, which is showing as 1027px wide.
The upshot of this is that the user can scroll the web page 3px horizontally, which is annoying. It should fit perfectly and be "locked" when the page loads. I still allow pinch zooming using these settings.
self.webView.delegate = self;
self.webView.scrollView.bounces = NO;
self.webView.scalesPageToFit = YES;
If I inspect the DOM of the webpage running in the app using Safari, I can see that the web page itself is definitely 1024px wide. So, it seems iOS is causing the problem.
So... does anyone know how I can force the UIWebBrowserView to 1024px rather than 1027px?
Thanks
Tobin
There are two things you could try here:
Zoom in the content using the scrollView property of your UIWebView by setting it's contentSize to your desired size (you may need to play with the contentOffset, too, until you get it right).
Set an appropriate viewport meta tag on your web page to control the layout on a mobile device. Something along these lines:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this helps.
Related
I have a div set to width: 100%. When I load it initially in the portrait view of the iphone the element width is picking up at 480px.
The odd thing about this is that when I console log the width at load I am getting 320px. Also, if I manually change the orientation to landscape and then back to portrait then the element is getting the correct sizing.
I have tried a handful of suggestions to the meta viewport tag, but nothing seems to be working. Here is the current tag info:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1, minimal-ui">
Also, when I change the zoom after initial load, then the element gets the correct sizing.
Any suggestions on how I can get the right size at initial load?
I was going to delete this post, but since someone upvoted it I figured I would provide the answer. The issue was that this element had position: fixed. I simply added position: absolute for the media query on mobile and it is now functioning properly. :)
I am facing a issue with the UIWebview on iPad.
I have to show a webpage in the webview with page fitted in webview properly.
the webpage has the following meta tag
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
the page looks ok if the webpage has height and width equals to device.
But if i change the webview height & width. the webpage stop fitting properly in the webview.
Is there anything i can do to fit the webpage properly in the webview. irrespective of the webview height and width.
I already tried all other questions on the stack overflow. but no success..
Can anybody help me on this regard.
Got the solution using
[webview stringByEvaluatingJavaScriptFromString:
[NSString stringWithFormat:
#"document.querySelector('meta[name=viewport]').setAttribute('content', 'width=%d;', false); ",(int)webview.frame.size.width]];`
Thanks to all..
Have you checked the scales page to fit in your web views attribute inspector?
Tested this in iOS6 iPhone as well as iOS7 iPhone simulator. I have a simple UIWebView for displaying web pages, but for some reason, this mobile page is clipped and only the right half is shown in Portrait mode. From trying to zoom or pan the page, I can tell that the UIWebView frame is correct, and that the page does not allow zooming out or panning, but it allows zooming in. If I then change to Landscape mode, then the page is framed correctly.
The UIWebView already have the following properties set:
webView.ScalesPageToFit = true;
webView.ContentMode = UIViewContentMode.ScaleToFill;
webView.MultipleTouchEnabled = true;
In LoadingFinished(UIWebView webView), I check the meta tag with name="viewport", and found the content to be reasonable:
width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes
The page shows up fine in iPhone Safari. What else can cause a web page to be clipped in UIWebView?
I'm optimizing a web-app to work on the iPad Portrait mode. The web-app is built as an iFrame with a width of 350px.
I use the following meta viewport tag:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=350" />
I expect this to behave as follows:
- The width of my visible viewport will be 350px.
- My web application is initially scaled at it's original size, which means the 350px iFrame will be fully rendered in the 350px viewport(with no white space at the borders of the visible viewport.
However, the iPad Portrait mode seems to ignore the width=350 property and renders the page as width=device-width.
Can somebody explain why this is happening and how I have to interpret this behaviour?
In iOS, iframes ignore all viewport settings and render as device defaults. Very annoying.
See -
iOS Safari expands frameset larger than viewport
In our case the viewport size on iPad was equal to the content which is first rendered. So if you have your main container spread to the whole width of the page iPad says "the viewport of that iframed page is same as the devide-width". The solution in our case was to set strict size of the iframe by using the width, height and style attributes. Then simple apply overflow: hidden on the main container.
I am using CSS media queries to create a web site with responsive design. When I open my test page on the iPad in either landscape or in portrait orientation, it looks fine.
However, when I switch from landscape to portrait mode, the page is shifted to the left. I can tell that the correct CSS is loading because other things on the page change. I can also drag the page to the right and it appears exactly as it does if I had opened the page in portrait initially.
I have my viewport set to:
meta id="view" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
I added JavaScript to fix the iOS viewport scaling bug which used to cause the page to be zoomed in when switching from portrait to landscape. (I used the solution described here: https://gist.github.com/901295 )
I'm having problems finding the name for the bug I'm experiencing when switching from landscape to portrait. Has anyone else seen this or know how to fix?
The problem owner says that she "can also drag the page to the right and it appears exactly as it does if I had opened the page in portrait initially."
This makes me think that, for some unknown reason (a bug?), the page is scrolled to the left at an orientation change to portrait mode (otherwise you wouldn't be able to drag it back).
I had a similar issue and solved it with the following JavaScript workaround:
// ...
// Optionally add a conditional here to check whether we are in Mobile Safari.
// ...
window.addEventListener('orientationchange', function() {
if (window.orientation == 0 || window.orientation == 180) {
// Reset scroll position if in portrait mode.
window.scrollTo(0, 0);
}
}, false);
Maybe this will work for others too.
I managed to sort my similar issue out - perhaps this will work for you?
You'll need to work out if it's a particular div or other element that's causing it by deleting/reinstating different bits and retesting the page. Once you've worked it out try adding an overflow: hidden property to that element in your CSS - I used overflow-x: hiddensince my issue was horizontal scrolling but you may need to vary it.
Hope this is of use... good luck!
Jereon, your JavaScript worked for me. My viewport is:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
I'm using the Drupal Corporate Clean responsive theme. I have not had this problem using the Omega responsive theme framework.
The solution for this is as proposed by #ellawson
Problem is caused by some element not being scaled correctly by the browser when rotating the device. Find that element and apply overflow: hidden; or overflow-x: hidden; as he says.
Note: this question is a duplicate. I'll post the gist of my answer here.
2015 update
All the other answers are unfortunately incorrect, outdated, or misguided. Here's what works:
window.addEventListener('orientationchange', function () {
var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display');
document.body.style.display='none';
setTimeout(function () {
document.body.style.display = originalBodyStyle;
}, 10);
});
The code listens to the orientationchange event and forced a re-flow of the body element by hiding it and showing it 10 miliseconds later. It does not depend on any <meta> tags or media queries.
You said,
When I open my test page on the iPad in either landscape or in portrait orientation, it looks fine. However, when I switch from landscape to portrait mode, the page is shifted to the left
That is key. You just need to force a re-paint of the body.
Answers that suggest adding <meta name="viewport" content="width=device-width, initial-scale=1.0"> or variations thereof, as of Safari 7, no longer wors. Here's a demo. To make sure you see how it doesn't work, start with the iPad in landscape mode, load the page, then rotate. Notice the page doesn't expand to full height, despite using flexbox all the way.
Compare that to this page, where we use the hide/show body technique in production.
I came across this problem with an iPad and applied html { overflow-x:hidden; } . That seems to have resolved the issue.
try adding the following setting to your content properties: maximum-scale=1
or try this: user-scalable=no
here is the ios documentation