Need help adjusting my app to fit on all devices

Alexander_N_4 · ‎08-08-2015

Hello,

I'm currently working on designing my app, and came across a rather big issue.
I can't seem to find any measurement units that make my app look the same on all devices.
I've tried using percentages and viewport height, but nothing does the trick.

Currently using the "jQuery mobile" framework.

I was wondering if there is a way to make it so that my app looks the same on every device, or if i simply have to make media queries for every single device. It's not thati don't mind doing this, but i just thought there might be a better way to achieve this.

Here is a visual reprensation of what I'm talking about:

This is how it should look; using the iPhone 6.

Here is how it shouldn't look; using the iphone 5.

As you can see, the text "Kategorier" is misplaced, and i can't see, to get a workaround for this.

I've read about something about dp, link here: http://developer.android.com/guide/practices/screens_support.html
And either it doesn't work with the XDK, or I dont know how to use it.
I've tried, but it didn't work.

Which is why I now need some other way to do this.

Thanks in advance.
Best regards,
Alexander.

Elroy_A_Intel · ‎08-10-2015

I recommend using media queries as this will allow for you to apply the ideal styling and sizing for the screen sizes that you want to support for various devices dynamically.

For more information about media queries for standard mobile devices, visit https://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

Michael_O_2 · ‎08-10-2015

Hello,

Add this snippet

to your <head> section.

Alexander_N_4 · ‎08-10-2015

Hi, I'm afraid none of your answers have worked for me!

Do you perhaps have any other ideas?

Chris_P_Intel · ‎08-10-2015

How are you positioning Kategorier and the content that follows it? Are you scaling the graphic above it?

If positioned relatively and the following that big graphic above it, then a margin of a certain pixel size seems the best course.

If positioned fixed or absolutely, then a top:____px seems the reliable way to go.

percentage or viewheight components don't seem right, unless that top graphic is vertically scaled

Anusha_M_Intel1 · ‎08-10-2015

When using the viewport meta tag its behavior is unpredictable in different webviews. Try building in android for crosswalk as it is known to be more compatible.

Please visit the following pages to get a better understanding of when to build with Crosswalk for Android:

http://blogs.intel.com/evangelists/2014/09/02/html5-web-app-webview-app/

https://software.intel.com/en-us/xdk/docs/why-use-crosswalk-for-android-builds

When using css media queries, make sure to include your viewport tag in <head>. This should work. Unless there is something wrong with your implementation.

PaulF_IntelCorp · ‎08-13-2015

Adding to Anusha's recommendation to use Crosswalk, make sure you use Crosswalk 14, the default will give you 11, which sometimes has strange behavior with the viewport sizing. 14 works much, much better.