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.
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 building a mobile app with jQuery Mobile for iPad landscape orientation. The pages are 1024px to 768px. When I view it on the desktop (Chorome, Safari, Firefox) it is rendering as it should (1024x768).
But after I save it to the Home Screen on the iPad (iOS 8) and open it, the pages are rendered as trimmed (around 20px) from the bottom. When I check it from the inspector, i see that the html element (which is assigned 99.9% height) is rendering as 747px height. So is the body element.
I tried to give pixel values as height, margins, paddings and all but some greater container seems to be clipping them.
I also tried a few things with the #viewport rule but nothing came out of it.
Any ideas why this is happening and how I can solve this?
It seems the problem was about the status bar. In the default mode, the iOS will pull all your html under the status bar but size the viewport to leave space for the bar (height: 748px). So the space below the 748px will be left blank, to show the white background.
When I added the line below in the head of my html file, the problem was solved (the viewport height equal to 768px -landscape)
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
I then tried it with different values for the content attribute, first with content="black", and then with content="default". In the latter it was the same as no meta tag was applied. With content="black", the bottom was again left blank, but this time the the background color was black.
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.
I have a fairly strange issue that I'm experiencing with jquery mobile / phonegap and IOS.
I've created a web app with html / css and so far it works exactly as expected on android, (The content scrolls vertically in the viewport) however on ios (my test platform is an iphone 4s), the page is limited vertically to the viewport. It scrolls just fine, but all content that sits below the viewport vertically get's cut off, IE the only content that will display is what I see in the upper half of the page, nothing below the viewport will display.
an excerpt from my css file:
html, body {
min-height:100%;
overflow-x:hidden;
background-attachment:fixed;
}
body {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
-webkit-font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
}
and my html page, in the head section:
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1 minimum-scale=1; user-scalable=no" />
Here's a couple screenshots of the problem in action:
As you can see from the screen shots, the gradient "should" fill the whole page (ie, expand with content), and it doesn't as there seems to be a hard cutoff at the viewport edge, so any more than a single page of content is not getting displayed. While it's not visible in these screenshots the vertical scrollbars are appearing as they should and the scrolling works fine, just no content is displayed "below the fold".
I am not using iScroll or any other scrolling scripts, just fyi.
I'm not sure if this is some sort of height issue, as I have a min-height:100%; set on the html and body of the page, or if it's some sort of width-device-width issue in the meta tag? I also do not believe I have any overflow-y:hidden set, as that would have limited the content on other platforms, and they work perfectly.
I feel like I must be missing something really basic, as I'm sure it's got to be some sort of css setting somewhere that's limiting the content to the viewport only, and an exhaustive google search could find no similar issues.
Check if your apps default orientation is set to portrait instead of landscape, or if it even supports the portrait orientation. It almost looks like its displaying the app as if its in landscape mode while its clearly in portrait. You can find the available orientation in the Target>General tab, or in the info.plist.
So I've fixed it, and the weird thing is, I'm not exactly sure what I did to fix the issue.
I moved the .ui-page selector from the jquery-mobile file to my own css file, removed the min-height from the html selector and killed the overflow-x from the html, body selectors and boom, it now appears to be working as intended. Wacky... but hey, a win is a win. :)
Here is a page I am working on for a class. Don't worry that it's all divs - the exercise allows that as it was to experiment with web fonts.
My problem is that the page renders fine in IE, Firefox, Safari, but on the iPad it doesn't center and the scale is off. If you look at the top left header "Top of the Napkin", it actually breaks into 2 lines on the iPad. There is no left margin yet quite a bit of right margin.
thanks for any help -
The above answer did not work for me on the iPad. Here is what did work.
In the body tag I added the minimum width of what I would want in a browser.
body { min-width:1080px; }
This worked without adding
<meta name="viewport" width=device-width />
but I left it in the header for good measure.
I checked the page on my iPad (latest IOS v5.1) and I can see the text "Top of the Napkin" on one line, though you are right about the entire page not getting center aligned..
For that, I would suggest you to do 2 things;
A. Set the viewport width as below (add this line inside your head element);
<meta name="viewport" width=device-width />
The above line would set your viewport width to device-width (i.e. 768px on the iPad). You can even hard code the value as
<meta name="viewport" width=900 />
Though this is not the best approach.
B. The other thing you can try is giving the following style to your body element
margin:0 auto
This would effectively center align your entire page.
There is some real good information on how to design websites for mobile (iPhone/iPad, etc) on http://bit.ly/rs1npZ
You probably need a viewport meta tag. Check the link for info on what this does and which to choose. http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/
I had the same problem.
for my part, the page was broken because of div elements bigger than their container.
i fixed it by playing with overflow-x property.
You may try putting overflow-x:hidden; on your containers.
I had the same problem. Here is how I fixed it:
<meta name="viewport" content="width=device-width, maximum-scale=.9" />