Javascript 如何使我的应用程序适合整个屏幕
我正在不同的电视屏幕上开发一个应用程序,除了LG 32LJ57 WebOS,其他平台上的一切都很好,由于某些原因,布局不适合整个屏幕,我尝试了不同的方法,1)添加元标记以适应屏幕,2)提高分辨率(注意默认分辨率为1920x1080),但是什么都没有改变,而且,当我在LG webOS模拟器上测试时,所有东西都非常适合,但不适合实际屏幕,感谢您的帮助Javascript 如何使我的应用程序适合整个屏幕,javascript,html,css,webos,lg,Javascript,Html,Css,Webos,Lg,我正在不同的电视屏幕上开发一个应用程序,除了LG 32LJ57 WebOS,其他平台上的一切都很好,由于某些原因,布局不适合整个屏幕,我尝试了不同的方法,1)添加元标记以适应屏幕,2)提高分辨率(注意默认分辨率为1920x1080),但是什么都没有改变,而且,当我在LG webOS模拟器上测试时,所有东西都非常适合,但不适合实际屏幕,感谢您的帮助 <html> <head> <meta http-equiv="Content-Ty
<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>
利比亚电视台
这是我在应用程序中使用的元标记,请尝试添加viewport fit=cover
请添加CSS,包含行div的行是否有宽度?使用容器流体包含引导中的行:
-尝试使用类容器流体将行包装到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>
尼勒萨特11526小时
@利比亚网络
电视可能无法处理分辨率为1080的应用程序()
我猜您已经将appinfo.json配置为“分辨率”:“1920x1080”
,但您也将HTML应用程序设置为设备宽度1280(content=“width=device width”
),因此电视基本上尝试使用两种不同的尺寸
要支持这些电视,您必须发布两个具有两个不同appinfo.json的应用程序,一个用于1080(
“分辨率”:“1920x1080”
),另一个用于720(“分辨率”:“1280x720”
)不幸的是,没有任何更改,应用程序未全屏显示。是否听说过视口单位或媒体查询:请添加CSS,包含行div的行是否有宽度?使用container fluid来包含引导中的行:-因此尝试使用类container fluid将行包装在一个div中。我将向上投票,因为他实际上为显示器拍照,而不是截图lmao。谢谢你尝试帮助我,这一切都很好,但屏幕的大小只是在一个特定的高度和宽度,请检查我所附的图片,它应该解释更多,所以你可以在图像中看到,它只是调整屏幕的一部分,而不是整个屏幕的大小