We're writing a mobile app using jQuery mobile and do most of the javascript debugging in Chrome. One thing I can't test however is an orientation change, from portrait to landscape and vice versa. I have to use a phone to fire that event, and am unable to debug the javascript window.orientationchange event without Chrome.
Or so it would seem. Is there a way to mock this event in Chrome somehow?
Since a desktop device doesn't have any real orientation changes, like mobile devices does have, it's no use to listen to orientationchange. You could simulate orientation by resizing the browser window though.
David Walsh wrote an article about this: http://davidwalsh.name/orientation-change
A way to test your media queries based on orientation:
The Window Resizer extension for Google Chrome enables you to view and test your site in either portrait or landscape orientation. When installed, it has a size predefined of 320 x 480 and the orientation returned by jQuery using $.event.special.orientationchange.orientation() will be "portrait". I added a new size of 480 x 320 for landscape and indicated a "Screen Type" of mobile. In 480 x 320 size, the orientation returned by jQuery using $.event.special.orientationchange.orientation() will be "landscape".
This does not allow you to test the orientation change event specifically, but it is very useful for testing media queries based on orientation.
Related
I am creating a website that will be used in a tablet mostly if not always in landscape mode. However, when someone taps into an input box the keyboard takes half the size of the screen in landscape mode which is a lot. It is fine is portrait mode but half the screen is way too much. Is there a way to popup smaller screen in landscape mode using CSS or is this something that has to be done from the browser setting
#jedu you are more user concerned if the user is mostly using the tab or mobile in landscape mode he would have already adjusted it's keyboard size accordingly to be more productive in his task.
The more or less we can do is to make the page appear more accessible in the landscape mode using landscape orientation css by writing media queries.
We can't size the keyboard of the user. But we can prompt a user about changing its keyboard size for more accessibility of the website as a message
I'm creating a Xamarin.Forms app which will work in landscape mode.
I want the WinPhone8 splash screen in Landscape only.
However, the splash image is shown in Portrait at first, and then rotated to landscape when the SupportedOrientations is set.
How do I get the splash screen in landscape?
I think landscape splash screens aren't supported on Windows Phone.
If it's a universal app you could try the method below, but I'm not sure if it only works on Windows Store apps.
Open up your app's manifest file and see if there is something like this in there;
<InitialRotationPreference>
<Rotation Preference="landscape"/>
<Rotation Preference="landscapeFlipped"/>
</InitialRotationPreference>
If not, add it :)
This tells your app to tell the OS that it wants to be in landscape initially.
Chrome has mobile phone simulator in developer's tools.
But when I activate it and the viewport shrinks media queries don't detect it and the CSS rules specific to smartphones don't get applied. Is there any way I can make them detect the shrinking?
After you select the desired size & sensors, did you tried to refresh the page?
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...
We're using a scaling technique to improve the resolution of our canvas web apps on the retina display. Basically, the technique described here:
http://zsprawl.com/iOS/2012/03/html5-canvas-and-retina-displays/
However, we've noticed a SIGNIFICANT performance difference when running in landscape mode vs portrait mode. I've set up a jsFiddle test app to demonstrate this. You can notice the difference if you view the embedded version:
http://jsfiddle.net/SaJ69/embedded/result/
(removing the /embedded/result/ will take you to the original fiddle. I could only have a post with 2 links in it)
If you switch between portrait and landscape when viewing this on an iPad3 (you'll need to refresh the browser window between switches) you can see that portrait mode is choppier than landscape. When running this on my own webserver (not through jsFiddle), the results are much more noticeable.
I tried to do some frame rate metrics, but they're only measuring the number of times we make draw calls, not the number of times the browser will actually update.
Anyone have any insight into this? Is this a hardware related issue? We are theoretically doing the same draw calls and filling the same number of pixels right?
-Chris
It seems one working fix is to clamp the canvas width to 1023, so that the double density canvas is 2046 px wide; discovered by Arima & explained here:
http://www.scirra.com/forum/retina-ios-performance-problem-fix-please-test_topic58742.html
I ran into the same issue with landscape vs. portrait as well. This also happens on iPhone 4, 4s, and 5 - Anywhere Retina and double density canvas is involved. The only work around I have is to simply not use the double density trick until Apple fixes the issue.
But, if you were determined to use Retina, you could detect the orientation of the device and resize the canvas for double density only in landscape...