Как сделать так, чтобы мое приложение помещалось на весь экран - PullRequest
0 голосов
/ 30 мая 2018

Я занимаюсь разработкой приложения на разных экранах телевизоров, все отлично работает на всех платформах, кроме LG 32LJ57 WebOS, по какой-то причине макет не подходит для всего экрана, я пробовал разные вещи, 1)добавление мета-тегов к размеру экрана, 2) увеличение разрешения (учитывая, что разрешение по умолчанию составляет 1920x1080), но ничего не меняется, также, когда я тестировал на эмуляторе LG WebOS, все идеально, но не на реальном экране, благодарю вас за помощь

<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

Ответы [ 3 ]

0 голосов
/ 30 мая 2018

Пожалуйста, добавьте свой CSS, у вас есть ширины в div с содержащейся строкой?Используйте контейнер-жидкость для хранения строк в начальной загрузке:

https://getbootstrap.com/docs/4.0/layout/overview/ - попробуйте обернуть строки в div с классом контейнера-жидкости:

<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>
0 голосов
/ 06 июня 2018

Возможно, телевизор не может обрабатывать приложения с разрешением 1080 (http://webostv.developer.lge.com/discover/specifications/webos-tv-platform/supported-app-resolution/)

Я полагаю, вы настроили appinfo.json с 'resolution': '1920x1080', но вы также настраиваете приложение HTML с шириной устройства1280 (content ="width=device-width"), поэтому в основном телевизор пытается использовать два разных размера

. Для поддержки этих телевизоров необходимо опубликовать два приложения с двумя разными appinfo.json, одно для 1080 ("resolution": "1920x1080"), а другоеза 720 ("resolution": "1280x720")

0 голосов
/ 30 мая 2018

это метатег, который я использую для своего приложения, попробуйте добавить 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">

...