User taken to bottom of page on rotation - viewport

I've come across an issue present on IPad and IPhone 6. When the user is at the middle of the page and rotates from landscape to portrait they are taken to the bottom of the page. After a lot of looking around into the issue I found that I could fix the issue using the viewport meta tags. I am currently using:
`<meta name="description" content="width=device-width", initial-scale=1/>`
When I remove the initial scale the issue is fixed but then the ipad scaling issue occurs where landscape is zoomed in and portrait is not.
Does anyone have a solution?

Use autoLayout and size classes to set your View according to orientation you will not need to look for metadata detail.

Related

Xcode 6.0/6.1 Interface Builder resizes views to fit whole content when clicked on the corner grip to resize

I think this is an obvious bug on Xcode 6.0.1 but I'm searching for at least a workaround. In interface builder, I have an image view that is smaller in dimensions than the image that it contains. Here is my newly created, fresh nib with just an image view, the heart image is a larger PNG file than the containing image view:
So far so good. However, when I click on the any of the grips at the corners/edges of the view to resize the image view, it immediately changes to this the very moment I click on the grip:
This happens whenever I try to resize by hand (I can resize using width/height values at inspector though) and I have hard time trying to fit my design into the nib. The problem happens both on nibs and the storyboards. Does anyone know a workaround?
UPDATE: I've updated to Xcode 6.1 but I'm still having the same problem.
The same result I've noticed when close and reopen the project. The view continues to grow up every time. I have created a simple project to search the cause of the wrong behavior of the autoresizing mask (flexible width AND align to right).
So, try to disable "flexible width/height" and "align to right". Keep the "align to left" only.
This answer is for autolayout-enabled views/nibs. For autoresizing mask solution, see Nicolai Nita's answer: Xcode 6.0/6.1 Interface Builder resizes views to fit whole content when clicked on the corner grip to resize
I've solved the problem by setting the content compression resistance priority (both vertical and horizontal) to 250 from 750. I don't know why it wasn't the case before Xcode 5 though.

UITableView won't scroll on iPad, but does on iPhone

If I turn my iPad to landscape a couple of row of table view (and the footer) are just off the bottom of the screen although it fits in portrait.
My problem is that when I use my finger to "pull" view port up to see the material off the bottom I can see it while I keep my finger in place, but when I remove the finger, the viewport drops down again and the material at the bottom disappears.
Same code scrolls fine on iPhone (fonts are too big and so on but that is a different issue)
What am I doing wrong?
Peter
As for what exactly your doing wrong... we can't see your code so we can't tell you. But shed some light on what is happening.
A UITableView is a UIScrollView and how far you can scroll is based on the size view (think frame) compared to the size(CGSize) of the content(contentSize) of the UIScrollView. If the 'frame' is bigger than the contentSize then no scrolling is needed, but if the content is larger, then you can scroll by the difference between the two.
In short, the contentSize of your UITableView is incorrect. This can be caused numerous ways, including auto-resizing on device rotations, dynamically changing table/footer heights without updating the table, etc.

tumblr having large 'empty' overflow to the right when using meta viewport

ive put the viewport meta tag into a a tumblr blog and it works fine but there seems to be a large area that scrolls to the right of the body that has nothing in it.
This does not show up on the desktop version so i cant use firebug to see why and im kinda at a loss of how to identify the problem.
I was thinking of setting overflow:hidden; but i didnt think you can do this for only horizontal plus it does not actually address the problem just covers it up.
the blog in question is www.blog.lightandspace.co.uk
please see the THIS SCREEN SHOT for example, its from ios sim but its exactly the same on the device (please not the scroll bar at the bottom) ... sorry i can embed it but im a new user and it wont allow me to
any helps much appreciated
cheers
It could be because your viewport width is set to 1224px, which is much wider than the iPhone viewport. Try this instead:
<meta name="viewport" content="width=device-width maximum-scale=1.4" />
This should set the viewport to the width of the device, so it should render nicely on any mobile device.

Issue on blackberry where site will not change orientation and will not scroll horizontally

When a users views my site on a Blackberry they are unable to scroll horizontally. This is important because the view port on the Blackberry is smaller than that of the width of the site. They can still scroll up and down just not side to side. The other thing is they cannot zoom out for the site either. Finally the site will not change orientation either. When testing on iPhone and iPad zooming and scrolling work fine.
Could it this be caused by a meta tag or view port setting? What are some of the things that could be causing this issue?
The issue appears to be that in absence of a meta tag the Balckberry Browser will set its own viewport to the screen width of the device. This made it so that the rest of the page to the right of the device viewport was cut off and although users could scroll up and down they could not scroll side to side.
The issue was solved by adding a meta tag defining the viewport, its width, and a zoom level with scalability explicitly defined.
<meta name="viewport" content="width = 1000, initial-scale = 1.0, user-scalable = yes">

Why is local image turned 90 degrees on UIWebView

I have an application that is set in landscape mode because of the content it contains. One of the things I want to do is take a picture of a piece of paper. I present the UIImagePickerController locked in portrait mode because it fits the paper size. After the user takes the picture I load that image as a background on a UIWebView. The reason I use a webview is because sometimes I need to load a .pdf there as well. Anyway, I'm setting the background using CSS. Here is the code...
//img is the path to an image.
myHtml = [NSString stringWithFormat:
#"<html><head>"
"</head>"
"<body><img src='%#'></body></html>", img];
[resume loadHTMLString:myHtml baseURL:baseURL];
The problem is, the image is displayed in landscape when the app returns to the UIWebView. Everything else is normal as far as text etc. Is there some reason that images are rotated 90 degrees to fit properly or something? I have tried pretty much everything with no luck.
The other thing is that we I retake a picture and reload the webView the old image remains.
You need to change the orientation of the image from its exif header if there is orientation info available in it. Identifying the picture orientation is the hard part, rotation of imgs can be done easily using css -webkit-transform: rotate(-90deg);
It does have to do with the exif data. While using a webkit transform may be ok for use in just the web view once, if you want to use the image later and have it always be the right orientation I'd use the categories given here:
http://vocaro.com/trevor/blog/2009/10/12/resize-a-uiimage-the-right-way/
The article does a great job explaining exactly why the rotation occurs and the code does a nice job of 'fixing' the 'problem' so that you can then make use of the image without having to do extra things or worry about whether it'll be displayed correctly (even though the UIImageView takes the orientation into account).
You can resize with this to the same size it originally was, and it should fix the orientation issue.

Resources