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...
Related
I'm using Xcode 9.2. I'm normally debugging my app on my iPhone X but lately I tried to check if my animations scale properly on both simulated iPhone SE and a physical iPhone 6S. To my surprise many constraints were pretty messed up as though they were still scaled in relation to iPhone X's dimensions. When I switched the "View as:" option in Storyboard to respectively iPhone 8 and SE, everything layed out properly. But only when this option matched the device I was running the app on. Strange, I thought this is just for previewing and shouldn't have any impact on the actual app. Has anyone encountered it ?
I think I know the culprit...I was calling a method that was animating the layout too early - in viewDidLoad. I guess the views weren't properly placed and sized yet, that's why iOS used a default size which happens to be the last viewed device size in Storyboard.
While testing my website's mobile version on several devices, I noticed a very strange behaviour.
I have a scrollable content div with overflow: auto, and this works properly on all tested devices, except iPhone 4 on Safari. Other browsers and devices display it correctly, even iPhone 5 Safari.
On iPhone 4 Safari, when you scroll to the end of the content, a lot of extra whitespace appears at the bottom (looks like 100-200% extra height) and the text disappears when scrolling. This doesn't happen on any other devices in Safari, nor does it happen in other browsers on iPhone 4.
Has anyone ever heard of such a phenomenon before? I have absolutely no clue what causes this behaviour or how to fix it.
Since I only have access to a limited amount of devices for testing, I may be overlooking other devices/browsers where this issue also occurs. If you have a mobile device and want to test it as well, the live site is here: Live site. On the mobile homepage, click one of the logo's to expand the content, then try scrolling down. Please post your results in a comment.
How it looks on iPhone 5 Safari when scrolled down (no issue): Image
How it looks on iPhone 4 Safari when scrolled down (issue): Image
I would venture to guess that you are exposing a layout quirk in Mobile Safari because of the way that you are hiding/showing the contents of each .company element. Each time that you change the display property of an element, the browser must perform a reflow. Reflows (also called layouts) are prohibitively expense on lower powered mobile devices. This would likely explain why you are only seeing the issue on an iPhone 4.
I myself tested on an iPhone 4 and iPhone 3GS, both running iOS 6.1.3, and I was able to reproduce the issue only when I expanded the top or bottom .company elements, but not the middle one. Perhaps this is because the middle .company element contains the fewer children, meaning fewer layout calculations are needed.
Instead of applying display: block; and display: none; to each of the children in the .company element, I would strongly recommend you simplify your javascript to instead toggle the display property on a single container element. By doing this, you force the browser to perform a reflow calculation only once, rather than for each element that you are individually changing the display property.
P.S.: The "other" browsers on an iPhone (i.e. Chrome and Opera) use UIWebviews. UIWebviews use a modified version of the Nitro Javascript engine (the Safari version has JIT compilation enabled). This subtle difference might explain why the issue can only be reproduced in Safari.
After playing around with your live site a bit using the Safari 6 remote debugging feature, I found a solutions that is working for me.
Add -webkit-overflow-scrolling: touch; to the .container element (the one that is the child of your #companies element).
After thinking about it some more, I remembered having issues with scrolling making content disappear randomly and adjusting the overflow-scrolling property fixed it for me.
I'm working on an app that is heavily GPS-based. Everything worked fantastically, specifically meaning my app's display of map tiles worked great, seemingly until I updated my iPhone5 (test device) to iOS 6.1.4. Yes, I know that 6.1.4 supposedly only touched audio profiles, but this failure to load map tiles certainly coincided with my phone's OS upgrade.
Ever since I updated, not a single application on my phone (any that presumably use MKMapView), except Apple's Maps app, will load any tiles when I attempt to zoom in to the max level. The tiles change to the gray grids with the Ø symbol.
FYI - when debugging my app, mapViewDidFailLoadingMap:withError: never fires, so the phone doesn't think it has a problem. It's almost as if they are the tiles Apple is sending to the phone.
Anyway, I tested this on another iPhone5, which had the same problems (and was also updated to 6.1.4), and an iPhone4 and iPad 2 Retina, which did NOT show the symptoms.
Obviously, for my app, I could restrict the max zoom level to get around this, but I'm more concerned about an issue that may not be resolved until another OS update, while restricting the user's/app's capabilities in order to mask the bug.
Has anyone else seen this happen on their own devices, or heard about this happening? I'd think that if this was actually related to 6.1.4, people would be freaking out all over the web, but my web searches turn up nothing.
Other thoughts?
Thanks!
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
I am coding a web app for an iPhone and I'm wondering how best to use Safari to develop for the iPhone, the main problem being that I've got is that Safari apparently cannot be resized to the narrow 320 pixels of width. How can I do that?
Any other tips and tricks?
If you are looking for an environment to test, Ripple emulator seems a nice option.
I had the same problem and solved it quickly and simply by using a 320x480-sized iframe. Additionally, I added options to change the size (iPhone portrait, landscape, iPad, status bar or not, ...) and presto! an iPhone “simulator”!
Edit: that also allows the use of the Web Developer tools, they're invaluable in Safari or Chrome (I prefer to use the latter, but both are Webkit-powered).
The absolute best way is to use a real device - iPhone or iPod touch - so you get a proper feel for how the device responds. If you're doing hefty animations, for example, testing on a desktop computer may leave you scrambling once you realize the entire page lags horribly on a real device the day before launch.
Barring that, you should use the iOS Simulator that comes with the xCode iOS SDK.
You can use a browser extention or plug-in. For Safari there is ResponsiveResize for instance. You can donwload it here. It allows you to use a predefined browser size, or use any custom size you'd like.