I'm using the JavaScript event onorientationchange and the parameter window.orientation to detect orientation changes and orientation values on my website. This works well with an iPhone and an Android. But a Windows Phone doesn't fire the onorientationchange event and window.orientation is undefined.
How I detect orientation changes of Windows Phones?
Thanks, Konrad
IE9Mobile doesn't support these events.
If your page is being displayed inside a WebBrowser control within a (silverlight) app then you can detect the orientation change at app level and then invoke scripts on the page to pass this information.
If you're just running in the browser then there is no way to detect orientation changes.
In CSS3 (works well with Mango, I don't know if in classic IE9 Mobile, but probably):
#media screen and (max-width: 480px)
{
/* CSS for Orientation Vertical */
}
#media screen and (min-width: 481px)
{
/* CSS for Orientation Horizontal */
}
Let me know if it worked!
The CSS change is perhaps the best way to detect orientation changes but, if you're like me, and just need a quick and dirty way to find out the current orientation then this'll do the job.
var isLandscape = $(window).width() > $(window).height();
For what it's worth, it seems like the implementation of window.orientation differs on certain platforms so you may need to check what device is being used.
Related
After the PR https://github.com/codenameone/CodenameOne/pull/3233, I get the popupDialogs as I want them (on Android). They are ok, the text is correctly in the centre, margin and padding are as I want them.
But I have an issue with iOS. Sometimes, when the popup Dialog contains very few text, iOS calculates wrong Dimension for the Dialog. It happens only on iOS.
What I understood is that the implementation of Dialog popups on iOS is native, while on Android it's lightweight. Please correct me if I have misunderstood. Since the Android implementation works well, I would like to use it on iOS as well. That's the meaning of this RFE of mine:
https://github.com/codenameone/CodenameOne/issues/3234
Anyway, I change my question: even without that RFE, can I use Lightweight Popup Dialogs also on iOS?
Yes but it might be a bit tricky. If you use CSS setting the popup border becomes a huge pain because of this issue.
So you'll need to either use the designer tool and define PopupDialog to explicitly use the RoundRectBorder or you'll need to do it from code (explicitly setting this into the theme).
A hack that might work (didn't try this) is using this code in your init(Object) instead of initFirstTheme:
try {
theme = Resources.openLayered(resourceFile);
themeProps.put("PopupDialog.derive", "Dialog");
themeProps.put("PopupDialog.border", RoundRectBorder.create().
cornerRadius(2f).
shadowOpacity(60).shadowSpread(3.0f));
themeProps.put("PopupDialog.transparency", "255");
themeProps.put("PopupDialog.bgColor", background);
themeProps.put("PopupDialog.padding", "4,4,4,4");
themeProps.put("PopupDialog.padUnit", new byte[]{Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS});
UIManager.getInstance().setThemeProps(theme.getTheme(theme.getThemeResourceNames()[0]));
Resources.setGlobalResources(theme);
} catch(IOException e){
Log.e(e);
}
I need to find a way to know if a user has used mouse hover or touch click to show and hide different menu links. What I want to do is this.
if(a user used a mouseenter or mouseleave){
$("li.mobile-show > a").hide();
$("div.hover-over").hover(function(){
$(".hover-dropdown", this).children().slideToggle();
});
}
else if(a user used touch click){
$("li.mobile-show > a").show();
$("div.hover-over").click(function(){
$(".hover-dropdown", this).children().toggle();
});
}
I tried Modernizr.mq('only all and (min-width: 768px)') to see if I can separate the table & mobile device vs computer screen, but it didn't work for large tablet devices that show the desktop view but only can use the touch feature. Help~!
It's an old trouble. Unfortunately there is no way. Not with Modernizr, not with anything.
Desktop browsers (at least major ones) has ontouchstart ('ontouchstart' in window) and whole Touch Events API.
Mobile browsers emulates mouse events.
making conclusions based on device width/dimensions is also prone to errors: many tablets has 1280, 1300 and more pixels width
I'm coding an app via Codename One. Since the screen of an iPad or other tablet is bigger than a phone's display and that would leave me with a bunch of open space, I was wondering if there is something in Codename One to have an image pop-up on a tablet but that it is not visible on a phone's display.
So is there something like that? How can I use it?
Thank you in advance!
Nick van Kesteren
You can use Display.isTablet() to adapt the UI for a tablet. Normally you don't do this at the image level but rather at a Container level.
E.g. I could do something like this:
Form myForm = new Form("My Title", new BorderLayout());
// add the stuff that's always here...
if(Display.getInstance().isTablet()) {
myForm.add(BorderLayout.EAST, createAdditionalTabletUI());
}
You can also enable other things such as permanent side menu to make the UI use the tablet aspects more intelligently.
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.
I've really got no clue how to describe the subject in English, so here is more info:
Check my (temporary) website on your phone (no matter what kind one) -> Click
What you'll see is the whole site including the background spread over your screen, instead of focussing on just the container in particular.
My only question is: How do I let the screen focus on the container, instead of the whole site. By other words: Ignore the background and spread the container over your whole screen.
Quick mockup:
What is the best way to achieve it, so it adjusts it to the whole screen of your phone?
Thanks!
Try this:
<meta name="viewport" content="width=device-width">
This will "zoom" your device to a reasonable value. ("reasonable" still depends somewhat on the vendor.)
In your case you can play around with device-width parameter and enter a value which suits you. But better stick with it for the time being.
Starting from this you can create different css styles via media-query and e.g. specify
#media (max-width: 400px)
.my-content-div {
width: 100%;
}
}
to scale your content to 100% on mobile devices.
Making a true responsive design is still a big mess but it can be done. Key is, that you start with something you can at least loosely rely on and then work your way from there.
If you want to make it responsive I think the best solution is by using Media Query instead of adjusting the viewport. Set #container to 100% width and height and set the margin to 0.