I am developing an app for Firefox OS which should always work in portrait view so I locked the orientation by using
screen.mozLockOrientation("portrait");
It works well
But when I rotate the device though the orientation is always portrait the width and height property does not remain the same. There are certain divisions in my app for which the width and height is decided by javascript, based on width and height of the screen. The function to decide the size of divisions is run at app start and when I keep the phone rotated(landscape) during startup the height is taken as width and vice-versa. How can I lock width and height property of screen along with orientation lock?
Will I need to write a function which should check the device orientation first and then decide which one is the correct width and height based on orientation? Or is there an alternate way to lock the width and height properties like orientation lock?
The only way I found is a hack as shown
var widthToUse,heightToUse;
if(screen.width < screen.height){
widthToUse=screen.width;
heightToUse=screen.height;
}
else{
widthToUse=screen.height;
heightToUse=screen.width;
}
But this is only a hack. Isn't there any existing way to lock the width and height properties along with orientation lock?
use
"orientation": "portrait-primary"
in manifest.webapp file which makes the screen orientation to portrait permanently.
Related
What I want
I want to know physical screen width and height using javscript
Why I want
I want it so that I can use it when a portrait screen device(like mobile phone) wants to have a video call with landscape device(like laptop). This way I can swap width and height constraints according to the other end of the call. So for mobile device I will send video in portrait mode and for laptop I will send it in landscape mode, by swapping width and height dimensions(constraints).
I would like to know a device original screen size or orientation irrespective of browser widow size change or device is orientation change.
I have already found many posts asking about orientation or dimensions but they all seem to have some flaws, according to the comments, and some don't address physical screen dimensions.
I have mentioned what I aim to achieve. Maybe there is a better way to achieve that.
Please help.
Thank you
You could use screen.height and screen.width properties in javascript to get the height and width of the user's screen in pixels (irrespective of the browser size).
> screen.width
2048
> screen.height
1280
This works with most browsers and certainly works with Chrome, IE, Safari, Firefox, Opera.
Use
window.height and window.width
I am trying to get width and height of device screen size not browser size not resolution and it should be same for both mode landscape and portrait mode. it there any possible way to get it in javascript.
A non-jQuery way to get the available screen dimension.
Use window.screen.availWidth/Height .
alert(window.screen.availWidth);
alert(window.screen.availHeight);
http://www.quirksmode.org/dom/w3c_cssom.html#t10 :
availWidth and availHeight - The available width and height on the screen (excluding OS taskbars & such).
screen.width and .height should contain the screen resolution of a tablet in device pixels and should change when the orientation of the device changes (for reference, see http://www.quirksmode.org/mobile/tableViewport.html). However, for the Nexus 7 Android tablet, these values are always screen.width = 1280 and screen.height = 736, regardless of the orientation. The height of 736 allows for a 64 pixel status bar (actual screen height = 800 pixels).
It's easy enought to flip these values in portrait mode (window.orientation=== 0 || window.orientation=== 180), which gives width 736 and height 1280, but since the status bar stays at top, the correct values should be 800 x 1216.
Is there a generalized/best practice approach to getting the screen width in device pixels on Android devices such as the Nexus 7? I'm aware of window.outerWidth, but have noticed it is sometimes incorrect. Is the failure to swap the width and height when the orientation changes common to all Android devices?
I too am struggling with Nexus 7 screen dimisions, however you would be better off getting the actual browsers dimensions for the document or window, these adjust themselves to the orentation.
This website does a better job of explaining it http://responsejs.com/labs/dimensions/
I have a mobile site that loads pages with ajax. One of the features I would like to add is to reset the zoom level when a page changes.
Is there a good method to detect if a user zoomed the view while viewing a page?
Until now I've managed to do the check for pinch zoom. But sometimes there is double tap zooming too ..
You can get the users zoom level by comparing the innerWidth and document width. Document width is the width of the device in pixels, inner width is the pixels which are on screen when zoomed (in relation to what the document width initially was). I have tested this on android (ICS and Jellybean), and iOS (5 and 6) and it seems to work. Note, I do not have my viewport set to device width or height
ratio = document.width / window.innerWidth
if ratio > 1 then zommed else notZoomed
Then you can do this check whenever a user makes a double tap or a pinch.
you can set the contents of the [meta name="viewport"] tag using javascript to set the zoom level, unfortunately i haven't found a way to detect what the current zoom level is
im using 960 and i want to adjust the nr of columns depending on the user's screen size.
how do javascript/jquery get the resolution of the screen?
screen.width will tell you the screens width. Or maybe screen.availWidth would be better. Note also that with jQuery you can get the $.width() and $.height() of items: $(window).width() for instance will tell you how wide your window is.
I would argue that screen size doesn't matter. What matters is how wide their viewport for your page is. They could have a 3000px across screen, but be viewing your page with only 1000px wide browser window.
In jQuery you can get the viewport width like this:
$(window).width()