获取真实设备的屏幕尺寸

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

谢谢你很多。

来源

2013-03-24 Glen Swift

一件事查询http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

这真的已经打开了我的脑海:)

享受一个伟大的文章！

来源

2013-05-01 20:15:29 op1ekun

出于兴趣我试过了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世界，世界你好文本

来源

2013-03-24 20:05:30

我想过使用媒体查询，但不知道他们帮助我。对不起，但我现在不能检查这个答案，但我明天会做，并接受你的答案，你的东西会正常工作。无论如何，非常感谢你的帮助，无论如何你的解决方案真的更好。 – 2013-03-24 21:17:58

如果这不起作用，你想恢复到JavaScript，我认为，除了你有什么你会测试视网膜显示，如果积极，加倍断点（即420和540）。请参阅本页＃4以获取有关javascript的帮助：http://www.sitepoint.com/css-techniques-for-retina-displays/祝您好运！ – 2013-03-24 22:08:24

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

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

来源

2013-04-29 09:42:36 Hiral

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

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

来源

2013-05-01 23:22:29