Блог

Я пытаюсь ограничить количество столбцов сетки (используя jQuery Mobile — http://demos.jquerymobile.com/1.4.2/grids /) в зависимости от ширины экрана. Это для полноэкранного приложения, которое не будет масштабируемым, поэтому нет необходимости в адаптивном дизайне.

Чтобы привести пример, если приложение загружено на iPhone 3GS (320 Вт x 480 Ч), хотелось бы ограничить его только 2 столбцами. При загрузке на Samsung S3 (720 Вт x 1280 Ч) ограничьте количество столбцов 4. И т.д.

Думал об использовании свойств JS document.width или width.screen.width, но обнаружил, что они слишком противоречивы. На Samsung Galaxy S3 под управлением Android собственный браузер сообщает о ширине экрана как 720 пикселей, а браузер Chrome сообщает об этом как 320 пикселей.

Добавление и удаление метатега окна просмотра не повлияло на значение ширины из JS.

meta name =»viewport» content =»масштабируемый пользователем = нет, начальный масштаб = 1.0, максимальный масштаб = 1.0, минимальный масштаб = 1.0″

Также не было задержки поиска с помощью setTimeout.

Версии jQuery, которые я использую:

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 
 

Есть ли способ добиться этого с помощью CSS?

Спасибо.

[ПРАВИТЬ / ПРАВИТЬ код]

Не уверен, что это проблема для приложения, которое я создаю. В Google Chrome на обновленных версиях Android видеть 4 столбца вместо 5 будет определенно «изящно проваливаться».

 <meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
 

Посмотрите, исправит ли это. Galaxy отображает половину пикселей, чтобы позволить видеокарте устройства отображать резкость самостоятельно и не постоянно получать веб-сайты для настольных компьютеров с сайтов, которые используют ширину экрана для определения типа устройства, когда устройство мобильное.

Пока я знаю, что номер столбца должен быть объявлен жестко запрограммированным. Поэтому он должен создаваться динамически для управления количеством столбцов.

 width=$(window).width();
 

или

 width=$( document ).width();
 

И

 if(width<=320)
{
    myhtml='<div class="ui-grid-a" class="mymenu">"';
    myhtml=myhtml '<div class="ui-block-a">Hello</div>';
    myhtml=myhtml '<div class="ui-block-b">Hello</div>';
    myhtml=myhtml '</div>';

}
else if(width>320 amp;amp; width<720)
{
    myhtml='<div class="ui-grid-b" class="mymenu">"';
    myhtml=myhtml '<div class="ui-block-a">Hello</div>';
    myhtml=myhtml '<div class="ui-block-b">Hello</div>';
    myhtml=myhtml '<div class="ui-block-c">Hello</div>';
    myhtml=myhtml '</div>';

}

$('#menu_div').html(myhtml);