This question is locked. New answers and comments are not allowed.
Thanks for Icenium and also for your great support.
I have an issue with auto sizing of app relative to the different resolutions of devices. I created an app with 1024x768 resolution. Everything is working fine in the App. However, when I am opening the app in different devices, the app is not getting fit to the screen. I need to scroll the app to see the bottom area elements. I have recreated the problem with a demo html file. I am adding below the page that I have created. This html file is 1024 x 768 resolution and its not getting fit to any of the devices that I checked.
I had done the checking with Samsung tablet 8.9 inch 10 inch, Micromax 10.1 inch funbook, HTC Desire V. Is there any option in Icenium to achieve this? If yes, please help me with this.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Hello World</title>
<style>
body{
margin:0px;
padding:0px;
}
.app{
margin:0 auto;
width:1004px;
height:748px;
background-color:#6666aa;
border:10px solid #009999;
color:#fff;
overflow:hidden;
}
.desc{
font-size:28px;
color:#000099;
}
</style>
</head>
<body>
<div class="app">
<h1>Testing App size to fit for different Screen Sizes</h1>
<div id="deviceready" class="blink">
<p class="desc">This 1024 x 768 App is getting fit to the screen in 10+ inch tablets only, apart from Micromax tablet.</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
I have an issue with auto sizing of app relative to the different resolutions of devices. I created an app with 1024x768 resolution. Everything is working fine in the App. However, when I am opening the app in different devices, the app is not getting fit to the screen. I need to scroll the app to see the bottom area elements. I have recreated the problem with a demo html file. I am adding below the page that I have created. This html file is 1024 x 768 resolution and its not getting fit to any of the devices that I checked.
I had done the checking with Samsung tablet 8.9 inch 10 inch, Micromax 10.1 inch funbook, HTC Desire V. Is there any option in Icenium to achieve this? If yes, please help me with this.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Hello World</title>
<style>
body{
margin:0px;
padding:0px;
}
.app{
margin:0 auto;
width:1004px;
height:748px;
background-color:#6666aa;
border:10px solid #009999;
color:#fff;
overflow:hidden;
}
.desc{
font-size:28px;
color:#000099;
}
</style>
</head>
<body>
<div class="app">
<h1>Testing App size to fit for different Screen Sizes</h1>
<div id="deviceready" class="blink">
<p class="desc">This 1024 x 768 App is getting fit to the screen in 10+ inch tablets only, apart from Micromax tablet.</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
1 Answer, 1 is accepted
0
Hello Pearson,
Thanks for your kind words.
Kristian D. Dimitrov
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
Thanks for your kind words.
In order to achieve the desired behavioral of your app, you can use the Responsive Design approach. Here is an article on this particular subject .
Another option is to use Kendo UI Mobile or jQuery Mobile frameworks. They handle a lot of the cross platform/device compatibility issues and you can just customize on top of it. You can read this blog post about designing an app for tablets and phones.
Kristian D. Dimitrov
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.