webkeepers, создание сайта

webkeepers


WebKeepers

Создание сайта и его продвижение


Previous Entry Share Next Entry
Тестинг адаптивной верстки
webkeepers, создание сайта
webkeepers
Сейчас мы дадим пару советов как тестировать адаптивную верстку. Тема эта довольно насущная, т.к. многим теперь подавай "суперкроссбраузерноадаптивный" сайт... :) В общем, начнем...
Наверное, никто не будет спорить, что самый лучший вариант в таких случаях - это "live-тестинг", т.е. когда мы тестируем наш проект прямо на нужном нам девайсе. Но, как вы понимаете невсегда и не у всех есть такая возможность. Поэтому, для таких случаев и начали разрабатываться специальные эмуляторы.



На данный момент для эмуляции доступны следующие платформы: 


Эмуляция - это, к сожалению, единственный способ в отсутствие девайсов увидеть адаптивный дизайн именно так, как он будет выглядеть на устройстве. Тем не менее, это не самое удобное решение, потому что большинство перечисленных вариантов требует установки различных средств разработчика для необходимой платформы на компьютер. Поэтому, самый простой (хоть и "деревянный") вариант - это изменение ширины браузера. Чтобы автоматизировать данный процесс, есть неколько вариантов:

1. Установка плагина для браузера (например, Window Resizer)
2. Страница с iframe для каждого разрешения. Исходник, который мы приводим чуть ниже, нужно сохранить под  именем test.html в папке с index.html


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Responsive Design Testing</title>
 <style>
  body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
  .wrapper { width: 6000px; }
  .frame { float: left; }
  h2 { margin: 0 0 5px 0; }
  iframe { margin: 0 20px 20px 0; border: 1px solid #666; }
 </style> 
</head>
<body>
 <div class="wrapper">
  <div class="frame">
   <h2>320 &times; 480 <small>(mobile)</small></h2>
   <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="320" height="480"></iframe>
  </div>
  <div class="frame">
   <h2>480 &times; 640 <small>(small tablet)</small></h2>                   
   <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="480" height="640"></iframe>
  </div>                                                                                                                        
  <div class="frame">
   <h2>768 &times; 1024 <small>(tablet - portrait)</small></h2>                   
   <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="768" height="1024"></iframe>
  </div>
  <div class="frame">
   <h2>1024 &times; 768 <small>(tablet - landscape)</small></h2>
   <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1024" height="768"></iframe>
  </div>
  <div class="frame">
   <h2>1200 &times; 800 <small>(desktop)</small></h2>
   <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1200" height="800"></iframe>
  </div>
 </div>
</body>
</html>

3. Еще быстрее можно проверить адаптивную верстку с помощью закладки в браузере, просто перетягивая ее на тестируемую страницу.
4. Веб-инструмент Screenfly позволит посмотреть, как примерно выглядит ваш сайт на популярных устройствах. Это не эмуляция, а скорее быстрый вариант проверки, насколько хорошо вы написали media queries.
5. Ну и два самых наших любимых сервиса - Responsinator и ScreenQueri, которые также покажут вам как выглядит компоновка вашего адаптивного сайта на популярных устройствах.

  • 1
Аноним выпей йаду

Камрад зачет

  • 1
?

Log in

No account? Create an account