Fixed dimension for cordova app

Question

I am trying to create a cordova application with a fixed width and height.If the device width is higher than the application width then it will display inside of the device view port. and if the device width is less than the application width,then only need to show the center part of the app.

It is more clear as in the bellow image,

The first image have the condition that the device have more width than the app.and second one have less width than the app.

I have tried by adding <meta> in my index.html file as follows,

<meta id="viewport"  name="viewport" content="width=<fixed width>,height=<fixed height>, initial-scale=1.0">

But this does not work,because of the cordova render its webview and set width and height before the index.html is loaded. Is there any method to achieve this?

Note: I only need to implement this on android devices.And I need to change webview dimension

Answer 1

Assuming your HTML area is in one nice div container - set its position to "absolute" and then use javascript to explicitly set its X position with xpos = (screenWidth - htmlWidth)/2

Answer 2

You can try to use a container like this:

.container {
  background: red;
  height: 400px;
  width: 600px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

<div class="container">
  <h1>
    hello
  </h1>
</div>