获取真实设备的屏幕尺寸

Question

我有一个问题，无法获取真实设备的屏幕尺寸。请看jsfiddle：http://jsfiddle.net/glenswift/CpBkU/ 调整输出框架会导致h1文本发生变化。我知道h1不同部分的像素大小，所以在台式机上可以正常工作。但是在dpi很大且屏幕很小的设备上，我的解决方案不起作用，文字超出屏幕。

我不知道如何解决这个问题。我已经看到了类似的问题（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();
});

Thank you a lot.

- Boris Zagoruiko

Answer 1

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

这是一篇非常棒的文章，让我大开眼界 :)

享受吧！

- op1ekun

Answer 2

请确保在meta标签中使用“viewport”。这是用于响应式网页设计的。 例如：<meta name="viewport" content="width=device-width" /> 参考资料：http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design

- codingrose

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 text。

- David Taiaroa

---

我考虑使用媒体查询，但不确定它们是否对我有帮助。抱歉，我现在无法检查这个答案，但明天我会检查并接受你的答案，如果你的东西能正常工作的话。无论如何，非常感谢你的帮助，你的解决方案在任何情况下都比我的好。 - Boris Zagoruiko

如果这个方法不起作用，你想要回到JavaScript，我认为除了你已经有的之外，你还需要测试视网膜显示屏，如果是积极的，将断点加倍（即420和540）。请参考此页面上的＃4以获取有关JavaScript的帮助：http://www.sitepoint.com/css-techniques-for-retina-displays/ 祝你好运！ - David Taiaroa

Answer 4

为了知道屏幕尺寸，您应该使用meta标签<meta name="viewport" content="width=device-width" />

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

- Ana Sampaio