Ionic app looks small in high res devices - android

I'm new on ionic. I'm building a simple demo app to decide if I will use ionic or not in my project.
I'm currently having this problem styling the app. Default theme looks OK in low-res devices, but looks too small in high-res devices (look the example images at the bottom)
Is there a way to resolve this globally? I want to AVOID creating custom meadia queries per resolution.
Screen capture of 480x800px device
Screen capture of 768x1280px device

Related

How to get a standard screen size of devices that works in ios and android both devices in a flutter

I will use full-size background images in my flutter app on some screen like(login, signup)background.
this image is static(means I will not customize this by using MediaQuery or any other code),
but I will still confuse that what size is proper for all devices(android, ios both)
I saw some documents that define, for particular device OS like android(mdpi,hdpi etc).
also same as Ios,
but what I will prefer in a flutter app

Button Borders appear broken in Android 4.1.2 using Ionic framework

I created a small app using following this tutorial.
App runs fine on Android but after running on 2 mobiles both running Android 4.1.2, I find that in one mobile the layout was broken. I mean button borders are broken.
Any suggestions on what is going wrong here ?
Using latest ionic framework and cordova.
This mostly happens because different mobile screen size.
You should create different layout files for different screen sizes
For more information go here:
http://developer.android.com/training/multiscreen/screensizes.html

html5 web app for android and other devices : resizable images

i am developing android app using html5+ crosswalk project for android
my main concern are images :
as i will be using same app for table and other mobile devices
is there some thing like resizable images ??
i call images
is there something that fro tablet we can call
for mobile small width
or some concept of resizable images
You can use the concept of picturefill which says for different screen sizes you can load different images and it basically decides using the media queries specified.
For detail you can see here

Convert android app icons to iOS app icons

I made an Android app. Now it's time to bite Apple.
I have had a little chance of developing iOS App before iOS7 released.
I want to make iOS app as same look and feel as Android app with similar UI components between Android and iOS as possible as I can. Therefore, if possible, I would like to re-use every design resources from Android to iOS app. So, I wonder if I can generate all the icons, images mostly will be resized to fit iOS6,7 app from Android icons current I had.
I found some online sites it generates all sizes of images from one image for iOS and Android.
IOS and Android App Icon size generator
Generate app icons of all sizes in a click!
I wonder if there are other solutions or some better ideas to achieve this.
Any ideas or suggestions would be appreciated, thanks.
Generally ios devices have retina screens and higher resolutions than android devices. I think you should not do this image resizing operation. If you do this, your ios app won't have a good view because of the higher resolutions of the ios devices' screens. You should make your design all over again for ios app.
You can read this.

android - BB10 compatibility

I am newbie to convert android apps to bb10. I converted one app to bb10 compatibility. The app is compatible with both device and tablet in android.I successfully run it in bb10 simulator. But the app doesn't show the UI part completely. Why? I have one more doubt generally BB10 devices shape is rectangle but simulator shape is square. why?
BlackBerry Image
Android Image
That is because your UI needs more space than the resolution provides. If you would place your controls within a scrollable container, you would be able to scroll down to the missing parts of your UI.
If you choose that container to automatically show the scrollbar, this would only be seen on Q10 but not on Z10. Try to switch your simulator to Z10 resolution, then it will propably show all your UI elements.
The real solution would be really to define the UI in relation to the resolution.
To start with this, here is an excellent definition on how to cluster your layout resources for your Android app. Your problem will disappear, when defining an appropriate layout for the minimum height(!) of e.g. 600dp and one for 800dp. The one with 600dp will be used for the Q10 (because it has 720px physical height) and the other one for the Z10 (that has 1280px).
By the way: you should encounter the same problem on some Android device, since there are a few with nearly square display (I remember a "BlackBerry clone" by HTC?). But of cause, these devices are really rare...

Categories

Resources