Twitter Bootstrap Question posted in

How to make my app fit the whole screen-Twitter bootstrap

I am developing an app on different tv screens, everything is working fine on each and every platform except on LG 32LJ57 WebOS, the layout doesn’t fit the whole screen for some reason, I’ve tried different things, 1) adding meta tags to fit the screen, 2) increasing resolution (noting that the default resolution is 1920×1080), but nothing is changing, also, when I tested on LG webOS emulator everything fits perfectly but not on the actual screen, appreciate your assistance

<html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, 
     maximum-scale=1, minimum-scale=1, width=device-width">
    <meta name='viewport' content='height=device-height'>
    <link rel="stylesheet" 
 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
integrity="sha384- 
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Libya TV</title>
</head>

<body>
    <section id="deviceready">
        <div class="row h-100 align-items-center text-center">
            <div class="col-xl-5 offset-xl-6">
                <div class="row row1">
                    <div class="col-xl-4">
                        <a id="0" class="logo" onclick="playMedia(0)"><img 
                               src="./img/Kids.png" class="img-fluid"></a>
                    </div>
                    <div class="col-xl-4">
                        <a id="1" class="logo" onclick="playMedia(1)"><img 
                               src="./img/sport.png" class="img-fluid"></a>
                    </div>
                    <div class="col-xl-4">
                        <a id="2" class="logo" onclick="playMedia(2)"><img 
                               src="./img/beauty.png" class="img-fluid"></a>
                    </div>
                </div>
                <div class="row row2">
                    <div class="col-xl-4">
                        <a id="3" class="logo" onclick="playMedia(3)"><img 
                               src="./img/doc.png" class="img-fluid"></a>
                    </div>
                    <div class="col-xl-4">
                        <a id="4" class="logo" onclick="playMedia(4)"><img 
                           src="./img/libyaTv.png" class="img-fluid"></a>
                    </div>
                    <div class="col-xl-4">
                        <a id="5" class="logo" onclick="playMedia(5)"><img 
                           src="./img/movies.png" class="img-fluid"></a>
                    </div>
                </div>

                <div class="row row3">
                    <div class="col-xl-4">
                        <a id="6" class="logo" onclick="playMedia(6)"><img 
                          src="./img/series.png" class="img-fluid"></a>
                    </div>
                    <div class="col-xl-4">
                        <a id="7" class="logo" onclick="playMedia(7)"><img 
                          src="./img/kojina.png" class="img-fluid"></a>
                    </div>

                    <div class="col-xl-4">
                        <a id="8" class="logo" onclick="playMedia(8)"><img 
                         src="./img/music.png" class="img-fluid"></a>
                    </div>
                </div>

                <div class="row row4">
                    <div class="col">
                        <p>
                            <span>NILESAT 11526 H</span>
                 <img src="./img/Layer%2015.png" class="img-fluid">
                 <img src="./img/square-twitter-256.png" class="img-fluid">
                 <img src="./img/app-icon21.png" class="img-fluid">
                            @Libyatvnetwork
                        </p>
                    </div>
                </div>

                <div class="row row5 ">
                    <div class="offset-1 ">
         <img src="./img/Layer%2016.png" class="img-fluid ">
         <img src="./img/appstore-icon-mobile-retina.png" class="img-fluid">
         <img src="./img/Group%2010%20copy.png" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </section>





    <link rel="stylesheet" href='css/video.css'>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="toast.js"></script>
    <script type="text/javascript" src="js/init.js"></script>
    <script type="text/javascript" src="js/media.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

enter image description here

Tags:

3

Answers


  1. 0

    this is the meta tag I use for my app, try adding viewport-fit=cover

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">

    Login or Signup to reply.
  2. 0

    Please add your CSS, do you have widths on the containing row divs? Use container-fluid to contain the rows in bootstrap:

    https://getbootstrap.com/docs/4.0/layout/overview/ – try wrapping the rows in a div with the class container-fluid:

    <div class="container-fluid">
    <div class="row h-100 align-items-center text-center">
        <div class="col-xl-5 offset-xl-6">
            <div class="row row1">
                <div class="col-xl-4">
                    <a id="0" class="logo" onclick="playMedia(0)"><img 
                           src="./img/Kids.png" class="img-fluid"></a>
                </div>
                <div class="col-xl-4">
                    <a id="1" class="logo" onclick="playMedia(1)"><img 
                           src="./img/sport.png" class="img-fluid"></a>
                </div>
                <div class="col-xl-4">
                    <a id="2" class="logo" onclick="playMedia(2)"><img 
                           src="./img/beauty.png" class="img-fluid"></a>
                </div>
            </div>
            <div class="row row2">
                <div class="col-xl-4">
                    <a id="3" class="logo" onclick="playMedia(3)"><img 
                           src="./img/doc.png" class="img-fluid"></a>
                </div>
                <div class="col-xl-4">
                    <a id="4" class="logo" onclick="playMedia(4)"><img 
                       src="./img/libyaTv.png" class="img-fluid"></a>
                </div>
                <div class="col-xl-4">
                    <a id="5" class="logo" onclick="playMedia(5)"><img 
                       src="./img/movies.png" class="img-fluid"></a>
                </div>
            </div>

            <div class="row row3">
                <div class="col-xl-4">
                    <a id="6" class="logo" onclick="playMedia(6)"><img 
                      src="./img/series.png" class="img-fluid"></a>
                </div>
                <div class="col-xl-4">
                    <a id="7" class="logo" onclick="playMedia(7)"><img 
                      src="./img/kojina.png" class="img-fluid"></a>
                </div>

                <div class="col-xl-4">
                    <a id="8" class="logo" onclick="playMedia(8)"><img 
                     src="./img/music.png" class="img-fluid"></a>
                </div>
            </div>

            <div class="row row4">
                <div class="col">
                    <p>
                        <span>NILESAT 11526 H</span>
             <img src="./img/Layer%2015.png" class="img-fluid">
             <img src="./img/square-twitter-256.png" class="img-fluid">
             <img src="./img/app-icon21.png" class="img-fluid">
                        @Libyatvnetwork
                    </p>
                </div>
            </div>

            <div class="row row5 ">
                <div class="offset-1 ">
     <img src="./img/Layer%2016.png" class="img-fluid ">
     <img src="./img/appstore-icon-mobile-retina.png" class="img-fluid">
     <img src="./img/Group%2010%20copy.png" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
</div>
    Login or Signup to reply.
  3. 0

    Maybe the TV can not process applications with 1080 resolution (http://webostv.developer.lge.com/discover/specifications/webos-tv-platform/supported-app-resolution/)

    I guess you have configured the appinfo.json with the 'resolution': '1920x1080', but you are also setting the HTML application with the device width 1280 (content ="width=device-width") so basically the TV is trying use two different sizes

    To support these televisions, you must publish two applications with two different appinfo.json , one for 1080 ("resolution": "1920x1080") and the other for 720 ("resolution": "1280x720")

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search