Почему google page speed не видит изменений в мобильной верстке?

Question

[Александр]

Суть такова. Пытаюсь сделать сайт адаптивным и , соответственно, изменяю стили элементов.
В настоящий момент делаю адаптивность под iphone 5,6.
Все стили прописываю под media screen and (max-width:1200px){
Изменения на смартфонах видны, но google pagespeed их почему-то не видит, в своем тесте он мне отображает десктопную версию сайта только в телефоне и также пишет что сайт не оптимизирован под мобильные устройства.

Comments

[Никита Кравченко]

скинь сайт или код

[Александр]

Никита Кравченко: am-parts.ru

Answer 1

[sergey]

Все стили прописываю под media screen and (max-width:1200px){

это как простите??? стили в media queries прописываются под все расширения экранов (хотя бы основных).
Кроме этого: viewport задан?

Пример media queries (вы можете свои размеры прописывать):

@media only screen and (min-width: 320px) and (max-width: 479px) {....}
@media only screen and (min-width: 480px) and (max-width: 767px) {....}
@media only screen and (min-width: 768px) and (max-width: 991px) {....}
@media only screen and (min-width: 992px) and (max-width: 1199px) {....}
@media only screen and (min-width: 1200px) and (max-width: 1920px) {....}

Comments

[Александр]

насколько я понимаю данный медиа-запрос затрагивает все устройства у которых ширина меньше 1200-х пикселей.
с viewport я игрался, но пока убрал его, так как например делает изначально слишком маленькую область просмотра, а если прописать без initial-scale, то все ок, но тогда google pagespeed начинает мне уменьшать баллы и криво отображать. В общем, там надо вникать в механику и разбираться тоже.

Смысл вопроса в том, что те изменения что я внес в сайт , которые есть на iphone и нету на десктопе, отсуствуют при проверке мобильной версии в google pagespeed.

[sergey]

Александр: нет не правильно понимаете, прочитайте о media queries

[Александр]

SM: не могли бы скинуть пример что я не так понимаю? Просто первый же материал что я открыл прямо указывал что стили под "media screen and (max-width:700px){" затронут только дисплеи у которых ширина будет 700пикселей и меньше. Собственно разницы с моим примером не вижу

[sergey]

Александр: вы снова не в ту сторону смотрите, да стили затронут, но какие стили. Допустим вы написали media screen and (max-width:1200px){} и делаете адаптивку, то каким образом ваши стили при уменьшении размера браузера скажем до 800 px будут отображены? где вы их пропишите? Вы совершено не понимаете логику адаптивки и медиа, извините, но читайте, материалов в google полным-полно.