獲取真實設備的屏幕尺寸

我遇到了獲取真實設備屏幕尺寸的問題。看看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