App is not being fit to the screen as per the device resolution.

2 posts, 0 answers
  1. Pearson
    Pearson avatar
    13 posts
    Member since:
    Dec 2012

    Posted 19 Mar 2013 Link to this post

    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.

            <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>
                        margin:0 auto;
                        border:10px solid #009999;
            <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>
            <script type="text/javascript" src="cordova.js"></script>
  2. Kristian D. Dimitrov
    Kristian D. Dimitrov avatar
    68 posts

    Posted 20 Mar 2013 Link to this post

    Hello Pearson,

    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.
Back to Top