Client wants to have layout for the mobile app adjusted according to aspect ratio of screen:
http://screensiz.es/phone and not just some width/height breakpoints. They want for example to cover 3:5 and/or 9:16. So I'm using media queries for aspect ratio. I'm developing the app in jQuery Mobile and using PhoneGap Build for compiling.
I have consulted this answer and this answer, but I can't detect right aspect ratios. Page: http://pavlov.rs/ht/index.html
When I open it in mobile browser on Samsung Galaxy S2 I get:
Dimensions = 320x229
Gcd = 1
Aspect = 320:229
Ratio is 32x45 (from media queries)
But when I compile that page with PhoneGap and open the app I get:
Dimensions = 320x508
Gcd = 4
Aspect = 80x127
Ratio is 32x45 (from media queries)
Is there some safe and bulletproof way working with those kind of media queries and specifically with jQM and PhoneGap combination?
Thanks.
Related
I have problems with gluon-mobile view sizing FXML, it use a different size I'm confused.
in the sample gluon-mobile it uses 350 x Height 600.
But in the scene builder File-> new Template it creates with 335 x Height 600
both Template.
I need it for setup my Adobe XD for design the background image.
Can it be specified?
Those sizes (350x600, 335x600) are set for reference, and to test on desktop, based on usual mobile formats, but the real size will be defined by the real device, and this can vary.
See for instance https://material.io/tools/devices/, where you can find several devices with 360x640 dp, but many other resolutions as well.
When you display your view with Gluon Mobile on a real device, the scene will take the full available size.
If you want to retrieve this value, you can use the DisplayService (see doc):
Services.get(DisplayService.class).ifPresent(service -> {
// screen resolution of the device, in pixels
Dimension2D resolution = service.getScreenResolution();
System.out.printf("Screen resolution: %.0fx%.0f", resolution.getWidth(), resolution.getHeight());
// default screen dimensions of a mobile device, in dp
Dimension2D dimensions = service.getDefaultDimensions();
System.out.printf("Screen dimensions: %.0fx%.0f", dimensions.getWidth(), dimensions.getHeight());
});
If you want to use an image for the background, you can use css to set it to expand or adjust properly to the final size, as documented here for -fx-background-image.
ok, it's mean that I need export design img in all sizes like to
mipmap-hdpi
mipmap-ldpi
...
mipmap-xxxhdpi
?
I'm new to Xamarin and I'm actually developing an Android App. I've tried to run the app on different Android phones, but the fontSize appears either too small or large. Programmatically, how can I scale the FontSize of texts so that it can be adjust according to the device's screen?
Firstly, make sure you are using sizes in dp not px (or in, mm etc.) as these will factor in the screen density.
If you still have an issue, look at Screens support in the Android Docs, especially Using configuration qualifiers. Examples can be found here.
Basically you would need to provide a different resource file for each screen size. You should have a file something like res/values/dimens.xml where you store sizes for all your components. Make sure your font sizes are declared and referenced from here. You can then create a series of folders/files for the different screen sizes
res/values/dimens.xml
res/values-sw320dp/dimens.xml
res/values-sw720dp/dimens.xml
res/values-sw1024dp/dimens.xml
where each of these folders define the smallest width screen that that file will be used for.
I am using JQM with HTML5 boiler plate. My objective (for tests purposes) is to have in a desktop browser, an overall div that will show me the expected size areas of my app on a real device. In a desktop browser, however, the width compared to the iphone4 browser width layout do not seems to match. I do not wish to change the viewport meta definition, although I suspect that it is my problem. Can somebody explain to me:
Why the size of a div of size 640 x 960 px (with a border of 1 px and a position of absolute) does not reflect the same size area appearance on the actual device with this type of setup ?
Regards.
Just use Chrome's Developer Tools. You can choose to spoof your User Agent as well as the device metrics for different devices.
When in Chrome:
Press F12.
Click on the gear icon to the bottom right (settings).
Click on the Overrides tab.
Here you can choose to change your User Agent string or override the viewport of your browser to match specific devices (like the iPhone). If you change the User Agent string to mimic an iPhone then the Device Metrics should auto adjust to be the proper size for the same device.
Note that you must keep the Chrome Developer Tools open, as soon as you close them you lose the UA spoofing and Device Metrics spoofing as well.
To directly answer your question, different screens have different pixel densities, so a screen with higher pixel density will show the same number of pixels in a smaller physical area.
As an add-on,
When dealing with CSS Media queries there is a difference between the
device-width and the
width.
For the iphone4, for instance, although the resolution
(width x height) is equal to (640 x 960),
the device is actually presenting
(device-width x device-height) as equal to (320 x 480)
From here we observe that each CSS pixel is handled by 2 screen resolution pixel. This is the consequence of the 2 different size.
This help: Pixel density for different devices
Ideal size for testing jQuery mobile website in Opera mobile simulator ?
When I set it to 350 * 600 my application look great but when I make it smaller or larger it looses some text [not alignment]
The issue is that designing for a fixed screen size will break. You could use Mediaqueries so your Web site will adjust to different screen sizes. See Mediaqueri.es for examples. And the article on how to use mediaqueries
I am developing an application on JDE 4.5. The 4.5 OS is supported by the Pearl, Curve and Huron so the application which I am developing will support all the above devices. The problem which I am facing is screen size. Screen Size of the Pearl is 240 x 260, Curve 320 x 240, Huron 320 x 240.
I am facing the following problems:
What should be the dimensions of the background image?
How should i place the fields (button , label....)?
Can any one please help me out.
Thanks a lot
Blackberry device resolutions can be broadly placed in two categories:
Low Resolution (width less than or equal to 320px)
High Resolution (width more than 320px)
This categorization conveniently allows us to maintain only two versions of the bitmaps and layouts - one for low-res devices and one for high-res devices.
Sample code for dealing with these different categories of screen resolution would be:
boolean lowRes = net.rim.device.api.system.Display.getWidth() <= 320;
if (lowRes)
{
// The device has a low resolution screen size
}
else
{
// The device has a high resolution screen size
}
Source: Developing applications for different screen sizes (http://docs.blackberry.com)
The the screen sizes are not the same ratios you could add multiple sized images to the project and based on the screen res use the appropriate image. (Large App Size)
If the image is a gradient and gradient portion ends at the lowest screen res you could fill the remaining background with the solid color the gradient ends with.
For controls you can use layout managers and build in styles to center and stretch controls to the width of the actual BB. Try to avoid using fixed width to make your app the most compatible. If you've developed web apps the same concepts apply.
Hope this helps.
Use calculate the position of contents using width(Display.getWidth option).Based on the screen width option ,u can position it.For images,u can resize,use images of 3 sizes
i)For Bold type of Phones
ii)Storm
iii)Pearl
create Images for it or else use resize option