I have developed a mobile web application which allows the user to take a picture with their mobile device camera and then displays it on an HTML5 canvas. When running this web application on an iPhone 5C under iOS 7, the image is severely vertically squished, so that it appears distorted and takes up approximately 20% of the canvas instead of taking 100% as intended.
This may be related to Safari image subsampling, which also caused vertical squishing in earlier versions of iOS and on other devices, although not nearly as bad as what is being seen in the above issue. A jquery plugin named megapix-image.js was created to address this issue and it works on iPhone4 and iPad running iOS 6 to correct this vertical squishing so the image appears correctly. megapix-image.js appears not to be compatible with iPhone 5/iOS 7 (it will not convert the image file).
Something to note is that iOS 7 completely corrected the vertical squishing issue seen on iPhone 4, but it has apparently made the problem much worse on iPhone 5/5C.
Is there a solution to this issue?
Solution:
<script type="text/javascript" src="~/Scripts/megapix-image.js"></script>
<script>
var mpImg = new MegaPixImage(file);
var mpImg.render(srcImage, {maxWidth: 960, maxHeight: 960});
</script>
where file is the file from the fileInput control and srcImage is the corrected image
I discovered that megapixel-image.js does work with iPhone 5 and iOS 7. I found I was calling some parameters incorrectly. The plug-in corrects the vertical squishing issue.
Related
My app scales the same on iPhone 6 and 6 plus as on the 5. I'm trying to get the app to use the extra screen space on the larger phone. I've read about using the appropriate size launch images, but it only works in the simulator, not on the device. I added a 750x1334 launch image for the iPhone 6, and the various sizes for the other devices. When I launch in the simulator, the scaling takes place as expected. When I launch on the device, the screen scales to the iPhone 4s scale instead.
I tried starting over with the launch images, and adding one at a time. Whenever I add the 750x1334 for the Retina HD 4.7, the app on the phone scales to iPhone 4 size. I tried deleting the app and reinstalling but the same thing happens. Also, I notice now that when I put in the Retina HD 4.7 image, it also causes the same thing to happen on my iPhone 5, even though there is an appropriate launch image for that size device.
Any help would be greatly appreciated.
EDITED TO ADD: My wife's iPhone 6 Plus just came in and it does not exhibit the above behavior (but remains a problem with iPhone 6 and 5).
I was able to achieve the desired result through doing the following:
1) leave in place my old Launch Images Source configuration set that covered iPhone 4 and 5. This takes care of iOS 7 devices.
2) create and designate a Launch Screen File in XIB. This takes care of all devices on iOS 8.
3) On iPhone 6, under Settings --> Display and Brightness --> Display Zoom, choose Standard instead of Zoomed. Users who have Zoomed will see the screen scaled to the same as that of iPhone 5.
canvasOn a web page in a mobile web application I am developing, I have a fileinput control that is used to take a picture with a mobile device camera. The image from the camera is then drawn onto an HTML5 canvas object on the same page.
The issue I am having is that if the web application is run on an iPhone 5 running iOS 7 (in the Safari web browser), the image appears extremely distorted. Specifically, the image appears to be vertically squished when drawn on the canvas. If the same web application is run on an Android device, no distortion is seen.
In previous versions of iOS and on iOS devices prior to iPhone 5, some vertical squishing was seen (although not as bad as this), and a jquery plugin named megapixel-image.js could be used to correct the vertical squishing. This tool unfortunately is not compatible with iOS 7.
Is this related to image subsampling in Safari or something else? What can be done to correct this? I obviously cannot have my users see this distorted image. Any mobile web app developer who wants to use the camera and HTML5 canvas is going to run into this, so a solution is mandatory.
megapixel-image.js does handle this correctly. I found I was passing some parameters to the plugin incorrectly, causing it not to work. My thanks to Ray Nicholus for his assistance with this issue.
Our current app doesn't work on the ipad 3 with retina display running ios7 beta 6.
The html page served between the is too big on the ipad, ie. ignores 100% width - therefore the user needs to scrolls around the page to see all the buttons and functionality rather than it fitting on one page.
This doesn't happen on the iphone 4 running ios7 (other models not checked) and it doesn't matter whether or not x2 is selected for the ipad zoom.
Has any one come across this issue, is this a media query fix or a iOs7 bug?
Just updating my answer based on what we've found last week and implemented for our app as a solution.
Although not entirely clear I believe the Question in hand above has to do with an HTML application running in webview vs. a web application in safari. Because 2x compatibility mode is being referenced in the question.
Issue:
Is not due to media Query but the viewport width=device-width is returning 768 instead of the 320 it returned in <= iOS6.x, when running an iPhone application in 'Compatibility Mode' on an iPad.
Fixing on the remote page
The best solution is to edit the viewport on the remote page by modifying the value of the 'width' attribute or removing it all together.
Fixing natively:
Few options...
1) Build the app as 'Universal'
2) I found somewhat passable results by executing javascript on webViewDidFinishLoad to decrease the scale
self.webView stringByEvaluatingJavaScriptFromString:#"$('meta[name=viewport]').attr('content','width=device-width, initial-scale=.41 user-scalable=no');"];
If you happen to be using PhoneGap/Cordova, issue was also identified and filed here: https://issues.apache.org/jira/browse/CB-4323
This should help:
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
iOS7 has been said to be the buggiest Safari version since 1.0.
There is no way to have a truly fullscreen experience on your website with iOS7. This was one of the wonderful aspects of iOS 6, and losing it is a major step backwards.
I hope that Apple comes to it's senses...
I'm having an issue with lazyload on the iphone 5 and 4s. For some reason, when I scroll down the page, it loads two images in the viewport, when there are 9 in the viewport, then i scroll down, only another 2 images are loaded, and again, etc. When I click the home button and go back to safari on the iphone 5, it then loads all the images in the viewport. I don't have an iphone 5 but i tested it at the apple store, I have an ipad 3 and it works fine on that. If anybody has any experience with this, any help would be greatly appreciated. I'm hoping Mika can chime in on this as well as he's active here too. Thanks!
after fixing some bugs, it appears to be working. had some problems with the viewport other minor css bugs, and now it works perfect.
I am testing some HTML code on UIWebView. And am also wishing to support both iOS 5.x and iOS 6.x. But there seems to be a problem about font size associated with iOS 6.x only.
That is, under rotation, iOS 5.x would make fonts slightly smaller when changing to portrait from landscape mode (which is desirable, since portrait's width is shorter). However, UIWebView in iOS 6.x would do just the opposite.
The problem does not come up when the same HTML code is rendered in iOS Safari (both 5.x and 6.x), as font size always scales as expected during rotation.
It could be something I've missed about UIWebView, hope somebody knowledgable could help to explain this.
Also, the above problem comes up on my iPhone 5 iOS 6.1 test device. Please comment if you do or don't find any similar problem. Wish to know if it is only associated with this particular phone (or its settings) only.
Latest Update :
The above problem should be related to how the project (which started long before iOS 6 was available) is laid out. As have set up a new test project with a UIWebView and a UIView in some different basic setups, and the text autosizing during rotation seems to be ok in both ios 5 & 6. The above problem may be due to custom layout adjustment code used which is good only in iOS 5. Really wish there were more compatibility between the 2 ios versions.
Please use the viewpoint setting to see the difference in ios 5 and ios 6