堆栈内存溢出
  简体   繁体   English

如何使我的应用适合整个屏幕

[英]How to make my app fit the whole screen

 原文  2018-05-30 09:52:38  8   3    javascript/ html/ css/ webos/ lg

问题描述

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 1920x1080), but nothing is changing, also, when I tested on LG webOS emulator everything fits perfectly but not on the actual screen, appreciate your assistance 我正在不同的电视屏幕上开发应用程序，除了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>

在此处输入图片说明

3 个解决方案

解决方案1
 1 已采纳  2018-06-06 09:01:48

Maybe the TV can not process applications with 1080 resolution ( http://webostv.developer.lge.com/discover/specifications/webos-tv-platform/supported-app-resolution/ ) 也许电视无法处理1080分辨率的应用程序（ 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 我猜您已经用'resolution': '1920x1080'配置了appinfo.json，但是您也将HTML应用程序的设备宽度设置为1280（ content ="width=device-width" ），因此基本上电视正在尝试使用两种不同的大小

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" ) 要支持这些电视，必须发布两个应用程序，其中两个应用程序具有不同的appinfo.json，一个用于1080（ "resolution": "1920x1080" ），另一个用于720（ "resolution": "1280x720" ）

解决方案2
 0  2018-05-30 10:41:21

这是我用于我的应用的meta标签，请尝试添加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">

解决方案3
 0  2018-05-30 12:49:22

Please add your CSS, do you have widths on the containing row divs? 请添加您的CSS，所包含的行div上是否有宽度？ 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: https://getbootstrap.com/docs/4.0/layout/overview/-尝试使用类container-fluid将行包装在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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何扩展图像高度以适应我的整个屏幕？ - How can I extend image height to fit my whole screen? 如何使对话框覆盖整个屏幕？ - How can I make my dialog box cover the whole screen? 如何使元素适合屏幕？ - How to make an element fit the screen? 如何使 div 适合整个宽度？ - How to make a div fit the whole width? 相对于浏览器大小，如何使内容适合整个屏幕？ - How to have the content fit whole screen with respect to the browser size? 如何使画布 100% 适合屏幕？ - how to make canvas 100% fit to the screen? REACT NATIVE：如何为整个屏幕制作抽屉 - REACT NATIVE: How to make Drawer for whole screen EJS：我怎样才能让我的内容占据整个屏幕（例如宽度：100%）？ - EJS: How can I make my content take up the whole screen (e.g. width: 100%)? 如何使内联块适合整个宽度？ - How to make a inline-block fit whole width? 无论屏幕大小如何，如何使带有图像的表格适合屏幕？ - How to make table with images fit the screen, regardless of screen size?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM