Веб разработчикам. Правильный вывод сайтов на Windows Phone 7

Posted on Март 16, 2011

6


Об этом мало говорят, но все же. Сегодня мы поговорим с вами о веб разработчиках, в частности о тех, которые разрабатывают сайты, которые будут доступны на Windows Phone 7 устройствах. Мы начнем с тем, которые связаны с IE7, а немного позже перейдем и к IE9.

Использование мобильного браузера для выхода в интернет становится все популярнее. Подумайте, разве вы хоть раз не выходили в интернет с мобильного телефона?

…Давным-давно в далекой-далекой галактике… Когда браузеры использовались только на стационарных машинах… Область на которой рисовались веб сайты была ограничена размерами окна браузера. Это было удобно, предсказуемо и отлично работало. Потом пришли новые браузеры, и функциональность браузеров начала расти…  В результате этого и новых технологий, появились браузеры в мобильных устройствах и теперь стало необходимо правильно отображать сайты в этих устройствах. К сожалению модель с десктопа не смогла нормально работать, так как экраны в основном небольшие и, как правило, находятся в портретной ориентации. В результате отображение сайтов вытягивалось по горизонтали, как на этой картинке:

В Windows Phone 7 разделена область отображения сайтов от окна браузера. Область отображения не зависит от окна браузера и разрешения экрана. Окно браузера всего лишь отображает видимую часть сайта и это все связанно с техническими характеристиками устройства и приложения. Для более детального изучения, советую почитать этот пост.

Управляем окном просмотра

На Windows Phone 7, все веб сайты по умолчанию получают окно просмотра 1024 пикселя. Перед тем как отрендерить контент, браузер выставляет такой зум, что бы область отображения вписалась в ширину окна. В итоге мы видим мини сайт из далека при первой загрузке.

Разработчики могут контролировать окно просмотра, используя специальный META тег, который называется viewport. Если это тег есть, то браузер решит, что контент страницы оптимизирован для мобильных браузеров и отключит всевозможные оптимизации, предназначенные для того, что бы улучшить читабельность десктопных сайтов на мобильных устройствах. и это значит, что сайт будет отображен именно так, как он задан в разметке!

Теперь давайте углубимся в то, как же работает этот тег на Windows Phone 7. Для начала нам необходимо создать HTML документ с четырьмя прямоугольниками разных размеров:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Viewport Test</title>
<style type="text/css">
.auto-style1 {
    font-size: large;
    color:white;
}
</style>
</head>

<body>
<div style="position:absolute;top:0px;left:0px;width:1024px;
            height:1024px;background-color:gray">
    <p style="text-align:right" class="auto-style1">1024px</p>
</div>
<div style="position:absolute;top:0px;left:0px;width:480px;
            height:480px;background-color:green">
    <p style="text-align:right" class="auto-style1">480px</p>
</div>
<div style="position:absolute;top:0px;left:0px;width:320px;
            height:320px;background-color:maroon">
    <p style="text-align:right" class="auto-style1">320px</p>
</div>
<div style="position:absolute;top:0px;left:0px;width:240px;
            height:240px;background-color:navy">
    <p style="text-align:right" class="auto-style1">240px</p>
</div>
</body>

</html>

Когда это документ отобразится на Windows Phone 7, он будет похож на это:

Задаем размер окна просмотра

Если ваш сайт разработан для специфической ширины, то предустановленное значение размера окна просмотра, то независимо от ширины экрана или устройства, вы всегда получите один ожидаемый размер. Браузер задаст зум, что бы контент вместился на отображаемом экране.
Например, на сайте мы используем:

<meta name="viewport" content="width=320" />

Наш сайт будет похож на это в портретной ориентации:

После переворота экрана, контент зумируется:

А если мы изменим тег на такой:

<meta content="width=480" />

Страничка будет выглядеть так:

Динамические размеры

Вы можете задать ширине значение ‘device-width’ для того что бы принудить Internet Explorer к автоматическому подбору размера области. Итак, это значение скажет браузеру, что сайт умеет подстраивать под различные разрешения и в результате мы сможем сменить вид «на лету» при изменении ориентации экрана.

Внутри, Windows Phone 7 задаст «device-width» значением 320 пикселей в портретном режиме и 480 пикселей в пейзажном. Эти значения были выбраны потому, что когда запускали Windows Phone 7 большинство мобильных веб сайтов на тот момент небыли готовы масштабироваться в более высокое DPI.

Совет: старайтесь использовать динамическую оценку размера, только если ваш сайт умеет масштабироваться для различной ширины экрана.

Теперь попробуем нашу страничку с таким МЕТА тегом:

<meta name="viewport" content="width=device-width" />

И загрузим ее на Windows Phone:

А после переворота, мы увидим, что наш документ изменил размеры:

Альтернативные способы изменения размер окна просмотра

Windows Phone 7 автоматически задаст размеры окна просмотра, если он(WP) определит что контент лучше отобразить как оптимизированный для просмотра с мобильных устройств. Такой контент бывает при использовании XHTML Mobile profile, или MobileOptimized, или HandheldFriendly META тегов.

Источник материалов: Managing the Windows Phone Browser Viewport

Реклама