Браузер для разработки мобильной версии сайта

Так я же пишу что сайт прошёл проверку в гугле, но не важно, уже проверил - приклеивается к левому краю.

MagistrYoda, да, вижу, пишете:

на этой же странице гугл показывает какие ресурсы он не может открыть. Откройте их в файле robots.txt и он покажет вам сайт так, как он отображается у вас на моб-девайсе. Я тоже проверял свой тестовый шаблон и он отображался не так, как у меня на смарте, пока не разрешил доступ к файлам css и js.

Вроде исправил, сейчас нормально открывается, только почему то эмулятор хрома показывает что на iphone 4 частично центральная область прилипла к левому краю. Почему там браузер чтоли особенный какой то стоит ?

Этот ресурс http://quirktools.com/screenfly/ удобен тем, что можно посмотреть, как будет выглядеть мобильная версия сайта, можно назначить экран для различных планшетов, мобильников, например так:

http://quirktools.com/screenfly/#u=http%3A//www.cotonti.mobi&w=360&h=640&a=39

еще один удобный тестер, его так трудно найти на ресурсе, поэтому с моим сайтом:

http://www.dimensionstoolkit.com/a/#url=http://www.cotonti.mobi&w=320&h=568

с регистрацией http://beta.screenqueri.es/

SergeyKocha, читайте прежде чем спамить ссылками. ТС просил тулзы для локалки.

Ну тогда, установите в firefox этот замечательный аддон:

https://addons.mozilla.org/en-US/firefox/addon/user-agent-changer/?src=userprofile

В самой лисе есть соответствующий пункт:

инструменты>Веб разработка> Адаптивный дизайн

В нем с помощью изменения размера, можно установить разные варианты (пресеты) экранов. Для чего изменяем размер области отображения (ползунок справа и снизу) или прямо указываем размер в поле размера. Полученный пресет сохраняем.

+++

Почему нужен аддон. Некоторые мобильные детекторы в конечном виде сводятся к этому решению https://github.com/serbanghita/Mobile-Detect нужна имитация юзера агента, вот как раз этот аддон и позволяет это сделать. Имеется база для аддона, которая позволяет загрузить имитаторы юзер агентов.

Прилипает, 5570 Samsung.

Задайте padding: 0 20%;

Для wrap

А где конткретно надо поменять wrap ? ато в шаблоне этих wrap несколько.

Родительский wrap, область видимости.

У вас сейчас фиксированный body на 990px, при просмотре через смартфон user agent не определился.

Для мобильных ширину задаете 100%, отступы по краям 20% и выравнивание по центру.

Это поверхностно, в идеале переделать всё под адаптив.

Все таки 21-й век на дворе.