使我的UI在不同分辨率上看起来完全相同
使我的UI在不同分辨率上看起来完全相同
提问于 2015-04-24 09:07:59
我正在开发一个运行在Internet TV Box上的javascript应用程序。
我的应用程序UI应该在不同的电视分辨率(720 p，1080 p，2k，4k等)上看起来完全相同。我的纵横比是16:9
我正在开发的设备有Opera9.8(我知道，它是石器时代的)
有任何方法可以通过纯CSS来实现这一点吗？
如果没有，那么javascript解决方案将是什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-04-24 09:10:42
使用在文档正文上设置字体大小的函数：
var setFonts = function() {
var size = {
height: window.innerHeight,
width: window.innerWidth
};
var ratio = size.width / size.height;
var max = 2;
var factor = 1.98;
if (ratio > max) {
size.width = size.height * factor;
}
size.width = parseInt(size.width);
document.body.setAttribute('style', 'font-size:' + size.width / 26 + 'px');
window.fontSize = size.width / 26;
};在此之后，使用em (而不是像素或百分比)设置每个渐变(宽度、高度、字体大小等)。
Stack Overflow用户
发布于 2015-04-24 09:16:44
如果使用html5，可以尝试引导css。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>这条线
<meta name="viewport" content="width=device-width, initial-scale=1">根据设备屏幕大小或高宽比自动更改页面布局。
以下是学习如何使用引导http://www.w3schools.com/bootstrap/default.asp的链接
希望这能有所帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29843229
复制相关文章
相似问题
腾讯云开发者
