I am running a html game inside an iFrame. The game is displaying on a canvas.
I am testing the game on Chrome mobile simulator Pixel 5 device size 851x393
I was testing to see whether game display correctly when the user rotate the device.
portrait mode window.innerwith/height is showing as 851 1843
landscape mode window.innerwith/height is showing as 851 393
I am also puzzled, how can innter width/height change when the device rotate?
But the game does display correctly. Following are the elements of each state
Landscape
Portrait
With these settings the game display correctly.
When I rotate the device few times, the game got expand beyond the screen, as if we are looking at a zoomed upper left hand corner of the game.
However the elements seems to be exact match when it display correctly before. Even though game is not displaying correctly now.
Can anyone provide some assistance on this ?
Related
I've captured a photo from in apple iphone 5s.
Dimension of the image is 960x1280.
Horizontal and vertical resolution is 72 dpi, Bit depth 24.
When I show the image in the img tag, the image is automatically rotated from portrait to horizontal.
But when I see the actual image, but the image is in computer in portrait mode only.
I don't know where is the issue.
I've opened in the ms paint to. I didn't get the issue.
I really confused in this. I've opened the image(which is in portrait mode) in ms paint and saved again in the same portrait mode itself. Now I've showed in the img tag, now the image is showing correctly in portrait mode itself in img tag. No issue has occurred. Working perfectly. Why the ios image is dynamically changing from portrait to horizontal?. I've checked with [http://imgur.com/ ]. The same issue has occurred in this application too.
How to resolve this?
Sometimes when you take a photo with an iPhone it embeds orientation information in the Exif metadata. Some applications understand this, some don't (web browsers don't), so you see different results.
Saving in MS Paint or, for example, "Save for Web" in Photoshop saves the image in the correct orientation, and strips the Exif data. You can also manually rotate the image on your phone, which will actually change the pixels, rather than just the Exif data.
When I view the image properties (see below) on my windows machine, it clearly says width:144 and height:256. But when viewing it in the browser the dimensions are flipped.
Example of it flipped in the browser:
http://jsfiddle.net/pLyg7ug9/2/
Direct link (notice that it loads correctly in chrome):
http://pro-cuts.herokuapp.com/images/slideshow/thumb/8_flipped.jpg
What would cause the browser to flip the width and height?
This is due JPEG Rotation and EXIF Orientation. Basically your camera has a sensor that rotates the image depending on how you take it. Phones that have their orientation locked will have these issues.
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 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...
I have an HTML5 page using CSS3 and SVG graphics in development. I tried using media queries to enlarge the SVG graphics when the device pixel ratio is 1.5 or 2. This works fine. Now I view my page on a small device like the Motorolla Xoom. The reported ratio is 1. This means the Xoom displays everything quite small as compared to a regular monitor. The most annoying part is that it looks great in landscape mode, but in portrait mode the full page is resized to fit in the same width. The ratio number does not change at this point.
I did try using something like 'width: 3in;' but again, it was only the correct size in landscape.
Ultimately, I'd like to use some ratio of device size vs pixel size, and scale everything this way. Is this possible?
My issue was that my graphics were never rendered again when orientation was changed. When I hit refresh again, all is coming up as expected. This was an issue that existed somewhere between my keyboard and my chair. The media queries are in fact working, I just need to rerender some stuff upon orientation change.