获取真实设备的屏幕尺寸答案

【问题标题】：Getting a real device's screen size获取真实设备的屏幕尺寸
【发布时间】：2013-05-02 07:22:29
【问题描述】：

我在获取真实设备的屏幕尺寸时遇到了问题。看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();
});

非常感谢。

【问题讨论】：

标签： javascript jquery responsive-design

【解决方案1】：

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

真是一篇让我大开眼界的好文章 :)

尽情享受吧！

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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 文本

【讨论】：

我考虑过使用媒体查询，但不确定它们是否对我有帮助。抱歉，我现在无法检查这个答案，但我明天会做，并接受你的答案，你的东西会正常工作。无论如何，非常感谢您的帮助，无论如何，您的解决方案都比我的要好。
如果这不起作用并且您想恢复为 javascript，我认为除了您拥有的内容之外，您还可以测试视网膜显示，如果是肯定的，则将断点加倍（即 420 和540)。有关 javascript 的帮助，请参阅此页面上的 #4：sitepoint.com/css-techniques-for-retina-displays 祝你好运！

【解决方案4】：

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

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

【讨论】：