Problem resolution LENOVO A5500-F

[g_5_]

Hello,

1) I created a new application and in css set the page size of 1280 x 800 px.

2) I created and downloaded build

3) I uploaded the app to your tablet

4) Run app in tablet

My tablet has a resolution of 1280 x 800 px, application is longer by about 30% :-(

run script in webbrowser = result 1280 x 736 px
var width = screen.width;
var height = screen.height;

run script in app = result 962 x 553 px
var width = screen.width;
var height = screen.height;

Please someone help? Thank you very much..

[Swati_S_Intel1]

Make sure you are using the viewport meta tag.

 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

[g_5_]

I attach PrintScreen...

[g_5_]

Yes I have.. any other ideas? Thank you.

[Swati_S_Intel1]

Use

overflow: hidden;

in your CSS.

[g_5_]

I spit on some css. I want to know why the body size does not fit on the screen !!

[Swati_S_Intel1]

The purpose of the viewport meta tag is to scale your app's content for different device sizes. When you use viewport the body content of the app assumes the size of the viewport and hence you should not use absolute px for the size. Whenever needed to specify size of elements you should use relative size (%) and not absolute px. To answer your question why body size does not fit the screen - notice that your device under test has viewport of 1080x1920 and the CSS pixel ratio is 2.5, that leaves CSS pixels to 432x768. Also, you have to consider the margin for the skin for the device, so the effective size will be slightly smaller. 

Some tips on UI development for mobile : You can achieve scaling and responsiveness with CSS, but it is best to use mobile UI framework such as jQuery Mobile, App Framework, Framework 7 etc. to avoid discrepancies in UI on different platforms and screen sizes.

[g_5_]

That is the problem. Very much and thank you..