获得真实设备的屏幕尺寸

Question

获取真实设备的屏幕尺寸时遇到问题。 看看jsfiddle： http ： //jsfiddle.net/glenswift/CpBkU/

调整输出框的大小会导致h1文本发生更改。 我知道h1不同部分的像素大小，因此它可以在桌面上正常工作。 但是在具有大dpi和小屏幕的设备上，我的解决方案不起作用，文本消失了。

我不知道如何解决这个问题。 我见过simular问题（ 1 ， 2 ），但他们不帮我。

我的代码：

function setPositions(){
    var W = $(window).width(),
        h1 = '';
    if (W < 210) {
        h1 = 'Hello';
    } else if (W < 270) {
        h1 = 'Hello World';
    } else {
        h1 = 'Hello World Text'
    }
    $('h1').empty().text(h1);
}
$(document).ready(function(){
    setPositions();
});
$(window).resize(function(){
    setPositions();
});

非常感谢。

Answer 1

关于媒体查询的另一件事http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

这真是一篇很棒的文章让我开心了:)

请享用！

Answer 2

确保在元标记中使用“viewport”。 它用于响应式网页设计。 即<meta name="viewport" content="width=device-width" />

参考： http ： //webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design

Answer 3

出于兴趣，我尝试了CSS方法。 我没有视网膜显示设备来仔细检查这个，但看看它看起来如何： http ： //jsfiddle.net/panchroma/Z678z/

我知道这在你的特定情况下可能不实用，但由于你处理文本而不是图像，CSS确实有一些优点。

HTML

<h1 class="small">Hello</h1>
<h1 class="med">Hello World</h1>
<h1 class="lge">Hello World Text!</h1>  

CSS

 @media (max-width: 210px){
 .small{
 display:inherit;
 }

 .med, .lge{
display:none;
}  
}

etc  

根据视口，h1文本从hello，hello world变为hello world文本

Answer 4

要知道屏幕大小，您应该使用元标记<meta name="viewport" content="width=device-width" />

您可以使用媒体查询根据屏幕大小宽度调整内容，而不是使用setPositions函数。