I'm new in phonegap and I'm looking for a safe and easy way to detect if the device is a tablet or a phone.
My approach is this. If the width size is more than height size then the device is a tablet, otherwise is a phone. The problem with this approach is that if the phone start in horizontal position the result is wrong.
I need something, a property or a method in phonegap to get for the original size of the device regardless if it is horizontal or vertical position.
I'm using this:
window.innerHeight;
window.innerWidth;
or
window.height;
window.width;
But if I change the orientation then the property (height or width)change. I need the original size of the screen regardless if it is horizontal or vertical position.
Can anyone help me please?
Thanks in advance.
You might try using the org.apache.cordova.device plugin.
http://ngcordova.com/docs/plugins/device/
http://docs.phonegap.com/en/edge/cordova_device_device.md.html
It gives you getDevice() method which you can use the deduce the device type.
Include the plugin in your project:
phonegap plugin add org.apache.cordova.device
And it will be ready to use.
Related
I've done desktop application's GUI for minimum 800x600 pixels. But now I need to make it look good when maximised in any screen size. There is so little to show, I don't know how to adjust the elements in big screen.
Now in 800x600:
Maximised in 1366x768:
I tried to make them bigger with screen size, but that give them kinda ugly, unsophisticated look. What should I do?
You need to use WPF Grid Layout to position your control. It will stretch the size of your control based on the defined layout.
You can read a tutorial here https://www.wpftutorial.net/GridLayout.html
You can use Uniform grid in that case
http://www.c-sharpcorner.com/uploadfile/raj1979/uniformgrid-in-wpf/
I've seen a couple posts about the UIImage automatically loading the filename-568.png image in the new iOS6, but I can't seem to recreate it in the UIImageView class.
I'm using the Storyboard (not my app, just having to do some checks), and I've a simple layout with just the Image View scaled to fit, no code in the view controller, and I've sure the filename.png and filename-568h.png exist (as well as -568#2x.png just in case) but when I load it up in the iOS6 simulator. This has been for iOS 4 and 5, loading the #2x image for retina, doesn't seem to work in iOS6 though. Any ideas?
The image happens to be called Default.png since it is the same as the launch image, could this be the issue?
Thanks for any help in advance
iOS6 does NOT automatically load -568h as it does with the #2x images. The only exception is the default screen, but further than that you have to manually set you 568h image yourself.
I created some code to mimic the loading behavior for -568h images when using the [UIImage imageNamed:#""] method, but from the IB I do not know the way. If you are interested in such a solution, check it out at http://angelolloqui.com/blog/20-iPhone5-568h-image-loading
Typically, you should only use 568h for the launch image. If you notice yourself using different image assets within your app for the new display height, you should consider that you might be making your UI too static.
The most obvious place people want to use 568h for images is for background images. An alternative is to just have one asset that has the largest possible dimensions and align it properly using the contentMode property of UIView.
But perhaps you have something floating in the image at the top and the bottom, so contentMode doesn't solve it. You could consider that the top and bottom floaters should probably be separate views anyway.
Remember, we have always been making apps with variable heights. Every time a keyboard pops up, its as if the size of the screen has shrunk.
It would be helpful to get the taskbar's height programmatically when sizing windows and preventing them from covering the taskbar. I can hardcode the height in window size calculations for now, but would appreciate a better approach.
I ended up not needing the taskbar height value anymore, because there is a way to get the desktop height without the taskbar:
_myDesktopApp.desktop.body.dom.clientHeight
Before, I was using:
_myDesktopApp.desktop.getHeight()
Which gave me the combined height.
So to get the taskbar, if I ever need it, I can do:
_myDesktopApp.desktop.getHeight() - _myDesktopApp.desktop.body.dom.clientHeight
My developer's box has a screen resolution of 1680 x 1050. I'm developing a full-screen Silverlight 3 application that I'm considering deploying to the Internet. So, I want to make sure the application looks good on a variety of screen resolutions. I just started testing on other boxes, the first one having a screen resolution of 1024 x 768. During the test I found some of the pages on the application were partially truncated. It seems the controls on the page didn't adjust for the lower screen resolution. So, I'm looking for some tips on how to make a Silverlight application, to the extent possible, adjust for screen resolution. For example, are there things one should or should not do on XAML to make adapting to screen resolution easier? Should I just optimize for a minimum screen resolution? Your thoughts and suggestions are welcomed.
You can easily enforce a minimum acceptable resolution by setting the MinHeight and MinWidth properties of your root visual. (Of course, this should be less than the minimum screen resolution to account for browser chrome.)
Try to specify absolute Width and Height only when necessary: for example, for images or icons of fixed dimensions, or for obvious cases like TextBoxes (whose width should reflect the average length of the data entered).
Grid panels are excellent for mixing scalable and fixed layout areas. The star sizing specification takes a bit of getting used to--it's not as simple as a percentage-based proportioning--but it's much more flexible, especially in combination with row/column min/max dimensions.
You don't really need to test on multiple resolutions unless you're interested in testing a range of dots per inch--just resize the browser to approximate different screens. Since there's always a bit of give and take depending on the user's browser configuration, you'll have to account for some variance anyway.
You can make your application scale with the Silverlight Toolkit ViewBox or make it strech with layout controls like the Grid, StackPanel, and WrapPanel. Make your main UserControl have a Width and Height of Auto (or remove the width and height entirely) and the size of the app will resize to the size of the parent div (the default HTML template uses 100%x100%). Then just resize the browser accordingly. IE8 has developer tools that can help you see your app resized to specific screen resolutions.
Testing on a variety of screen resolutions is always a good idea.
I covered the resizing of elements and making it resolution independent on another thread.
You can have a look here, there are multiple ways to sizing and resizing things automatically.
Is it possible to resize a silverlight/flash video player on the fly? I would like to create a video where I can drag the bottom left corner to resize the player (maintaining aspect ratio) or at least eliminate the possibility of doing so I could move on to other methods.
Thanks in advance...
EDIT: // forgot to mention
Sorry forgot to mention, this would also mean that the actual video itself resizing right?
Silverlight: Absolutely. Just set the the Stretch property to Uniform and then alter either the Width or Height as you resize.
Flash: Yes, you can alter the size of a flash object through JavaScript. Using a YUI, jQuery, or a Mootools JavaScript library, this should not be too difficult to prototype.
Here is a posts which explains how to resize flash from within your flash code.
Proportional resizing - here is an example of that as well using jQuery.
I'm not sure if the same is true for Silverlight browser objects, although I'd be surprised if you couldn't do the same.
This is a CSS solution for resizing videos on the fly.
The video can even resize itself according to the user settings if it is styled using EMs. This demo shows how a video resize itself according to the width of the user agent.
Here is an example of the silverlight scaling. This photo retouching and restoration site has a couple of silverlight controls that scale with browser resizing. There is quite a nice photo gallery that shows the photos before and after the retouch.
JWPlayer
As of version 5.3 they added a resize() method to the javascript API which allows you to resize a player - and all the control bar etc. will resize correctly too.
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference
resize(width, height) Resizes the
player to the specified dimensions.
width:Number: the new overall width of
the player.
height:Number: the new
overall height of the player. Note: If
a controlbar or playlist is displayed
next to the video, the actual video is
of course smaller than the overall
player.