Edit: also happens with $('body').width() and window.outerWidth
API 2.3.3 HVGA
Before and after rotating device outputs same screen width (320)
API 3.0 WXGA
Width and height toggle each rotation for example
starts with screenWidth:1280 screenheight: 800
I rotate 90
now has screenWidth:800 screenheight: 1280
so what do I do if I want to make certain changes on rotations
according to dimensions and want to target all APIs? I need a value which is the same for all devices.
Edit: For certain things I need pixel values, not percentages. That's why I'm using Javascript to calculate size based on screen width. This would work, since screen width is also pixel values and I can keep things proportional. But if sometimes screen.width gives me the current width, and others not, I can't use it...
-> The thing is I started working with a slider which uses absolute layout and needs pixel values for everything. I don't want to reimplement the slider, so I decided to calculate dynamically the size of the images and the whole layout using screen width. And initialize the slider with these values.
update
Look here is a similar approach to what I'm trying to do:
http://ryangillespie.com/phonegap.php#/phonegap.php?
Entry of June 18, 2011
"One Screen Resolution to Rule Them All"
I tried also with exactly that example, copy pasting it in my code. But it doesn't work either. window.outerWidth has the same problems as I'm describing for screen.width (as well as JQuery $('body').width()). It works as long as the device isn't rotated - it initializes well. But at the first rotation, depending of the device, I get problems. In some it works as expected, in others it interchanges the values, so that I get large width in portrait mode and short in landscape, in others it gives fixed width and height all time, in others it doesn't rotate at all....
Responsive web design techniques. I give a super brief example on my blog along with a book recommendation.
http://simonmacdonald.blogspot.com/2012/01/on-eight-day-of-phonegapping-multiple.html
I use media queries in two of my PhoneGap Apps. No javascript, except in
the case of anomalies.
For example, the "base" css could be for width 320 and portrait,
then using the cascading effect of css :-) add blocks like:
#media screen and (max-width: 480px) and (orientation:portrait) { make stuff bigger}
#media all and (min-width: 800px) { make stuff even bigger }
With queries like these in my link'd css files (and the device/os/phonegap
handling of orientation changes) the new layouts happen auto-magically.
NOTE: I learned all this from reading Simon's blog and the materials he suggested.
Coincidentally I found that this works:
$(window).resize(function() {
updateScaling($('body').width());
});
This is always called and passes correct width. As far as I remember it also works with screen.width
In updateScaling I calculate a scalingFactor and adjust my elements.
I tried out responsive CSS, media queries and so on, but at some point it didn't make sense anymore, because I have anyways to recalculate the margin of slider's UL based on current slide and new width - and other stuff which needs script. So I made everything with script.
I removed window.onorientationchange.
I'm not aware how phonegap presents in information for you, but for a native Android application you typically declare different layouts and image resources for various display densities and screen sizes/widths. See this page for more information: http://developer.android.com/guide/practices/screens_support.html
Related
I thought like if I give width: 10, it will look the same in all devices since it occupied the same amount of area (because in 160dpi, 10dp = 10px, 320dpi 10dp = 20px but occupies same area in an inch)).I think my understanding is wrong. Share your thoughts on Responsive design and how to approach responsive font size as well. Thanks.
Ive been through this phase , and thought similiar , but i was wrong. Sizes are different on different mobile so the best appraoch would be to actually calculate and make it in a percentage.
react-native-responsive this is the library i use for actually making my app responsive and it worked out well. All you need is actually know your testing device height and width , suppose its 360*640.
Now you want to apply height of 200 , so basically you do 200/640 , i.e 31.25 ,
so in your view or whatever image you want you can add height by height:hp('31.25%'), and thats it, it adjust accordingly to devices.
And if you dont want to use any library , you can use Dimensions of react native.
import {Dimensions} from 'react-native';
var {deviceheight, devicewidth} = Dimensions.get('window');
Now similiar approach , you now need to know resolution of your testing device and if its 360 * 640 , then you can do the same , just here suppose again height is 200 , then you have to do height:0.3125*deviceheight
Hope it helps. feel free for doubts
In width: 10,, 10 is equivalent to 10 units. So in such cases, it will always set the with to 10 pixels, no matter which device/screen you use.
Instead, you can use percentage or relative measurements so that it can adapt to different devices, therefore, making your elements 'responsive'
i'm creating an ios,android app using titanium so i positioning my ui view on specific percentage from screen size using platformWidth and platformHeight multiplied by a number
e.g. 0.5*platformHeight for the middle of the screen and every thing work on all iOS devices sizes.
but on android devices this value became too large
Note i m using "dp" as a default unit
so any idea on how to achieve same layout in this way
You can actually use percentage as value of position properties. ex top : '40%'. This percentage is calculated wrt parent. And if you don't specify any position by default the view will be positioned in centre of the parent unless, parent is a vertical or horizontal layout.
Also are you specifying the default unit as below?
<property name="ti.ui.defaultunit">dp</property>
If this is the case then here's what might be happening. Say the device height is 800px. Halving it give 400 px. This is the value you are expecting. But when you assign this value again to the view it is converted to DP. So, it turns out to be 400 x device density, which will be greater than 400 for sure. To overcome this you might have to assign the property something like top: 0.5*platformHeight+'px'. I'm not sure if this trick will work as I do not have the setup to test it.
From the Titanium documentation on platformHeight:
Absolute height of the display in relation to UI orientation. Measured in platform-specific units; pixels on Android and density-independent pixels (dip) on iOS.
Because Titanium uses pixels, you also need to use pixels on Android, or the values will be too large for most phones. dp are based on the density of the screen, so 100 dp are somewhat the same in physical size on every phone.
More about that can be read here:
http://developer.android.com/guide/practices/screens_support.html
Read a detailed answered by #Malcolm agreed by many experts.He has been upvoted multiple times for this answer
https://developer.appcelerator.com/question/148337/how-to-achieve-same-layout-for-android-and-iphone-using-titanium
Thanks
I am developing an Android application where the server sends all the values corresponding to dimensions in pixels for 1920*1080 resolution device.I need the app to be supported on multiple screen resolutions.I went through Android documentation on supporting multiple screen resolutions.It suggests to convert pixels to dip and then render.I did that in my application but the views are not rendered as required.So I tried applying simple unitary method by dynamically getting the screen width and height and then scaling all dimensions based on current screen width and height.
Say my current screen width is X and height is Y.So what I did was
Scaling factor in horizontal direction = New Screen Width/1920.
Scaled dimension in horizontal direction = Scaling factor in horizontal direction * Dimension from server in horizontal direction.
Similarly for vertical direction.
The application is now looking fine on my device.But is it a reliable way of doing things ? Should I be dealing with density of display too ?
DP is probably the better approach, if you elaborate a bit on what you mean by 'not rendered as required' I can try to help.
I can think of two main issues with your current method:
Different aspect ratios of devices. Using your method you will end up with distorted imagery. For example a square in 'server dimensions' is 400x400. In a 800x480 phone, that square will be 162x177 - no longer a square. Depending on your visuals and purpose of your app, this may or may not be an issue. If it is an issue, you need to account for that.
Physical views' size. One of the purposes of the DP method is to ensure a view will have (almost ) the same size across different devices, mainly never too small to handle for the user. So using the DP approach, a 100dp button will be 200px on a high density device, and 100px on a medium density device. This way the button is physically the same size on both devices.
But your method ignores that. Take the square from the first example - it will always be a fifth (400/1920) of the width of the screen. This can be either huge or tiny, depending on the device dimensions. Again, depending on your needs this may or may not be a problem.
Your method can work, as long as you account for these (and maybe more) problems. But it does require special care and probably more coding and work to make it work perfectly compared to simply using DP.
So I have an Android forms-based app that fills a 7" screen beautifully, portrait only, and there are over 50 forms. Rather than have to redesign each form (or the entire app) to suit each different resolution, my business case solution is to just scale the form to fill the screen. A 10" tablet will look a bit spaced out (but I can add some margins), and on a phone you better have a stylus and good eyesight!
Rather than argue about whether these are good choices, my question is: can it be done? On Windows CE the forms scale with the text size via "dialog box units", which works quite well. Android doesn't have anything like that, unless there are tricky ways of using 'sp' units. Regardless, getting a form to fill a screen nicely on different resolutions looks like hair-pulling-out territory, unless I'm missing something.
In answer to comments, it's a native app defined using XML layouts. For an example, you could take just about any sample app and show how to make it scale to different screen sizes, so you if the screen is small you get tiny text regardless of resolution.
Just to be clear: I don't think this question can be helpfully answered by describing how to use the standard Android way of handling multiple screen sizes: http://developer.android.com/guide/practices/screens_support.html. This is what I don't want to do this time. This really is about how to do other thing -- scaling to fit -- for when you really need it.
I hope I understand your situation well:
If it is a web application (you are using a webview) then use the viewport tag:
<meta name="viewport" content="width=device-width;">
This will fit the page content to the device screen.
Or if it is a native application (also would work for a web application), you can add fill-parent for your layout heigth and width, in your layout XML.
Use this code:
Display display = getWindowManager().getDefaultDisplay();
width = display.getWidth();
height = display.getHeight();
To get the height and width of any Android screen, and with this particular dimension, set the proportion for your layouts.
For example,
RelativeLayout fieldMain = (RelativeLayout)findViewById(R.id.field_layout);
fieldMain.setLayoutParams(new RelativeLayout.LayoutParams((Int)(0.8*width), (int) (0.9*height)));
I am looking for a robust way to scale my AIR for Android app up, or down, for different screen sizes.
The app is going to be published privately, and will only likely ever sit on devices with a very small range of resolutions (720 or 1080p typically)
Now, firstly, I read that you cannot change the stage height and width dynamically and can only be set once in the application settings. So first off, do I set my app to have the largest resolution, 1080p, and scale down. Or do I set it to a mid ground between 1080 and 720 and let it scale up and down?
Secondly, how should I scale it? Should I use Stage.scaleMode and if so, which mode?
How do I scale the app if I cannot resize the stage directly?
I have looked at the following pages, but they don't seem to work very well, if at all, for some odd reason?
link 1
link 2
link 3
link 4
You can do everything dynamically!
use:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT
and handle it yourself when the application starts. By useing relative values instead of fixed pixels, to position your items
To get the devices dimensions and DPI use:
Capabilities.screenResolutionX;
Capabilities.screenResolutionY;
Capabilities.screenDPI;
If you're useing Bitmaps dont let them scale too much, and rather down then up.
Also checkout .smoothing attribute for Bitmaps.
its best to have different size bitmaps ready and replace them according to your screensize in some startup method.
the second link u postet acutally explains all this very well