I´m writing a webapp for an iPad with HTML5, JavaScript and jQuery. My users need to take pictures with the build-in camera. For that reason I am using input type="file". This works great in different browsers (Chrome/Safari Mobile) but the problem is that when I add my app to the homescreen and take a photo in lanscape fullscreen mode- iOS brings up the camera from the wrong side. To be clearer iPad in landscape mode camera slides in from the left side(should be from the bottom). It behaves like it was called from portrait mode and the picture has a dark part on the left side. The camera window automatically changes the orientation - I debugged it - twice (0°/-90°). When I finish taking the picture and return to the app it is displayed in portrait mode, even though holding it on landscape mode. And additionally the screen is somehow locked. Thsi behaviour doesen't occure holding the iPad in portrait mode. Anyone an idea how to solve this strange behaviour? I found that question but no answers...
Related
I have a user who is using my web app on a Surface Pro 4. The app doesn't render very well. The best way I can describe it is that it appears the browser window has been resized to a small size and it's trying to bunch stuff up. However, I believe he has his browser maximized.
Since I don't have a Surface, I've been trying to get both Chrome and Edge to emulate the rendering issues. Here's what I've tried:
Edge: Has a preset for the Surface Pro 4. I figured that once I selected this mode I would see the problem. It's actually the opposite situation. I actually have to expand the browser window to multiple displays to be able to see all the content (even the browser scrollbars). I suspect that's due to the Surface having a higher resolution than my PC.
Chrome: No preset for the Surface and I couldn't find anyone who had the specific settings. I tried 2738 x 1834 and all three of the built-in pixel ratios (1.0, 2.0, 3.0). Chrome zoomed out so that it all fit on my screen. It also had no rendering issues. Changing pixel ratio made no difference.
I'll admit that web UI development is not my strong suit. And it doesn't help that I inherited a lot of this code. But I'm really scratching my head here.
If I try to emulate with a phone preset, then I can see rendering issues because the app isn't phone friendly, nor does it really need to be. That seems to suggest the emulation in the browser is working fine. What's left? The only thing I can think is that he must be using some kind of scaling that's messing things up.
Also, I should note that I had a friend with an iPad (Sorry don't know what model) try the app out as well and he also sees the same bad rendering issues. In fact, he thinks it's rendering worse than the Surface.
Edit 1:
I put together a test page that shows the header from our app. It is here: https://app.astrolabe-analytics.com/surfaceTest
Here are screenshots of the various displays being tested:
Here is Surface Pro 4 Hardware - Notice buttons are wrapping
Next one is iPad Hardware (I don't believe it's the pro version)
Then here is the way I have Chrome set up to emulate the Surface Pro
Surface Pro 4 emulation in Edge. Note that I had to extend the browser window onto my second monitor to take the screenshot.
Finally, the standard appearance in Chrome
It seems that the emulation works well on my side. please check the following screen shots:
Edge emulation for iPad,
Edge emulation for Surface Pro 4,
Chrome emulation for iPad:
Chrome emulation for Surface Pro 4:
Besides, I also found that if we resize the browser window (change the width property), if the width is too small, the text will wrap or disappear. Please check this image:
So, I suppose the issue is related to the CSS style, as a workaround, you could try to set fixed width property (or using the min-width property) for the navbar-nav class, also, you could refer to the following links to use Bootstrap navbar styles:
Bootstrap Navbar
Angular Bootstrap navbar
The screen resolution of the nexus 5 is 1920X1080, and Libgdx says it is 1794X1080. I'm using it in landscape mode, and libgdx is getting the height correct, but it reduces the width. I guess that is because is not counting the pixels of the navigation bar.
Is there any solution to make libgdx to detect the width including the navigation bar?
If you just want to get real display resolution you should check this question. But I think you may want to run your application in real fullscreen mode. That's it, without navigation bar. Just set useImmersiveMode to true in your AndroidApplicationConfiguration.
You can Read about Android immersive mode here: http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/backends/android/AndroidApplicationConfiguration.html#useImmersiveMode
I'm coding a fully responsive cross-browser site. I've already coded portrait mode and what I did to inspect changes and modify the my CSS file was to scale my Chrome Browser up to a point where I saw the same thing on my browser and on my iOS simulator. In that way I could work out every change and edit my CSS file. I now need to do the same on landscape mode, but I can't find a way to use an inspector that would simulate landscape mode.
I have Chrome, Firefox, Safari and IE and I'm open to any tool that would enable me to inspect the webpage simulating landscape mode not only regular tablets and phones but also Retina-supported devices.
Here is a really cool plugin.
http://lab.maltewassermann.com/viewport-resizer/
You can use it on any browser. Drag the "Click or Bookmark" button to your bookmark bar, then click it on any page you want to change the view size for.
Here is the image of the button you want to drag to your bookmark bar:
Here is an image of the toolbar that it adds.
My favorite tool to use for this is http://www.browserstack.com/. This isn't free but well worth it.
A third option is Adobe Edge Inspect. You can display the page right on the device but inspect the elements through you laptop or desktop computer. This option is free but you need to create an Adobe ID.
Background: The application is an iPad app running in Landscape only. When upgrading the app to Xcode 5 and running in the IOS7 simulator, I noticed that some buttons on the right side of the screen were not fully active. i.e. only a fraction of the left side of the button was clickable.
Observation: Running the same source code in IOS6 and IOS7 simulators, and viewing the view hierarchy using the REVEAL tool, I can see that the dimensions of the UIViewControllerWrapperView (the parent of my top level view controller) are landscape for IOS6 (1024x768), but portrait for IOS7.
I am trying to find a way to set the frame of the UIViewControllerWrapperView to the correct dimensions. In the view controller's viewDidLoad method, I tried to get a reference to self.view.superview, but it returns nil.
Can anybody explain; a) why the UIViewControllerWrapperView's frame is in the wrong orientation when running in IOS7 and not IOS6, and more importantly b) how to make it right?
Are you using a UITabBarController? We were having exactly the same issue and got it working by adding this on the UITabBarController:
- (void)viewDidLayoutSubviews
{
// fix for iOS7 bug in UITabBarController
self.selectedViewController.view.superview.frame = self.view.bounds;
}
Why? check this answer
How to restrict browser view to Landscape on a mobile browser in HTML5? On potrait view, it should display "Switch to landscape mode" and load when it is turned to landscape mode.
you can use the "onorientationchange" event of your browser. I extracted a working example from one of my testing projects: http://jsfiddle.net/r9b8D/
Its not exactly what you are looking for, but it shows the implementation of "onorientationchange". Copy the jsfiddle example to your host and navigate to the site with your mobile phone to see what happens - Maybe you can navigate to jsfiddle with your phone, i am not sure.
Feel free to modify the example to fit your needs.