How to set project screen size?

[SNOOPP]

now it scales 475x838 background to 261x460 container as we can see appery always running in 320x480 mode, problem not solved

[Maryna Brodina]

Hello! Not sure I understand. Could you post public app link and steps to reproduce?

[SNOOPP]

Link
http://appery.io/app/mobile-frame?src...

open it with your tablet or phone

on my phone screen resolution is 640×1136 and background what is 475x838 doesn't fit, because app renders in 320x480. please, don't say that i need to calculate all sizes depending from my device screen.

[Nikita]

Hello!

You can add this image as an image –component with styles:
width: 100vw;
height: 100vh;
position: absolute;

[Zahhar Kirillov]

Nikita, thank you for joining us.

Let me point out, that the problem is not in particular image. The problem is there is NO WAY (sorry for caps!) to get bigger resolution then 320x480 on any device.

We set 640x960 (the largest resolution possible in Appery settings), we create a design using all the canvas, but it DOES NOT FIT (sorry again) not iPhone screen (that is 640×1136 and should fit with extra space), not Lg G2 screen (that is 1080x1920).

Can you understand this issue, Nikita?

[Zahhar Kirillov]

Seems I found the solution.

Meta viewport should be set to something specific, ours was too generic. I will continue experimenting and waiting an advice from Appery team, wha is the best meta viewport to satisfy most of the devices on the market currently?

Mine works as follows:

prewidth=device-width,height=device-height,user-scalable=no,target-densitydpi=250,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0/pre

[Zahhar Kirillov]

See below please

[Igor]

Hello,

The reason of your problem are known in web development under iPone 4 and upper.

You can read about it here: http://www.quirksmode.org/blog/archiv...

If you really want to use all device resolution you have to add following js code on page load:
pre
code

if(/* condition to define which browser should be processed */){

Code: Select all

 $('head')&#46;append('<meta name="viewport"  name="viewport" content="width=device-width, minimum-scale=0&#46;5, maximum-scale=0&#46;5, user-scalable=no, target-densitydpi=device-dpi" />'); 

};
/code
/pre
Note: condition have to be true only for devices that's have the problem. Be careful with this solution.

This link should be helpful: http://blog.kutej.net/2011/02/meta-na...