Получение размера экрана реального устройства

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(); 
}); 

Спасибо много.

Answer 1

еще о средствах массовой информации запросов http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

Это действительно большая статья, которая открыла свой ум :)

ENJOY!

Answer 2

Из интереса Я пробовал подход 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 изменения текста от привет, Привет, мир, в привет мир текста

Answer 3

Убедитесь что вы используете «viewport» в метатеге. Он предназначен для гибкого веб-проектирования. т.е. <meta name="viewport" content="width=device-width" />

Ссылка: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design

Answer 4

Чтобы узнать размер экрана, вы должны использовать мета-тег <meta name="viewport" content="width=device-width" />

Вместо использования функции setPositions, вы можете использовать медиа-запросы, чтобы настроить содержание в зависимости от ширины размер экрана.