Results 1 to 3 of 3

Thread: Displaying total app content in phone/tablet mode using iframe

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    Hyderabad
    Posts
    41
    Answers
    2

    Default Answered: Displaying total app content in phone/tablet mode using iframe

    Hi All,

    I want to render my application into a phone kind of look if user access the application in browser, similar to watch list example in sencha touch. If i access in browser, it will display that app in phone iframe. Even in documentation of sencha, i see that kind of implementation. Any suggestions how to achieve that? Please see below image for more clarity how i require.

    RequiredPattern.PNG


    Thanks

  2. HTML Code:
    <!DOCTYPE HTML>
    <html manifest="" lang="en-US">
    <head>
    <meta charset="UTF-8">
        <title>Your App</title>
        <style type="text/css">
            html, body {
                height: 100%;
            }
            .container {
                margin-top: 100px;
            }
    
    
            .phone {
                margin: 0 auto;
                padding: 78px 25px;
                width: 368px;
                height: 637px;
                background: url(images/phone-p.jpg) no-repeat;
            }
        </style>
    </head>
    <body>
            <div class="container">
                <div class="phone">
                    <iframe id="app" width="320" height="481" border="0" src="http://your-app.com"></iframe>
                </div>
            </div>
    </body>
    </html>

  3. #2
    Sencha Premium User mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    693
    Answers
    21

    Default

    HTML Code:
    <!DOCTYPE HTML>
    <html manifest="" lang="en-US">
    <head>
    <meta charset="UTF-8">
        <title>Your App</title>
        <style type="text/css">
            html, body {
                height: 100%;
            }
            .container {
                margin-top: 100px;
            }
    
    
            .phone {
                margin: 0 auto;
                padding: 78px 25px;
                width: 368px;
                height: 637px;
                background: url(images/phone-p.jpg) no-repeat;
            }
        </style>
    </head>
    <body>
            <div class="container">
                <div class="phone">
                    <iframe id="app" width="320" height="481" border="0" src="http://your-app.com"></iframe>
                </div>
            </div>
    </body>
    </html>

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Location
    Hyderabad
    Posts
    41
    Answers
    2

    Default

    @mrsunshine

    That works fine. Thanks.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •