Въпрос за css за мобилни устройства

[hatre]

Направих си сайта responsive - като се свива браузъра се свива и сайта, изчезват някои елементи, появява най-горе падащо responsive меню... Проблема е, че когато тествам сайта тук https://www.google.com/webmasters/tools/mobile-friendly/ показва го не свит, а широк, все едно на 12-13 инча монитор. Ако сложа в инструмента, фейсбук или някоя тема на WP, която е мобилна, показва я свита, както на телефон. Ползвам @media only screen, но инструмента ми изписва „Мобилният прозоречен изглед не е зададен” , като че ли трябва по друг начин да укажа, ако е мобилно устройство, кой css да зареди? Как да направя това без php?

 

[hatre]

От: Въпрос за css за мобилни устройства

Поставих това и изписа "Прекрасно! Тази страница е удобна за мобилни устройства." Един ред, а каква разлика

<meta name=viewport content="width=device-width, initial-scale=1">

 

[AMitrev]

От: Въпрос за css за мобилни устройства

php-то няма никакво отношение така, че дишай спокойно . Сложил ли си <meta name="viewport" content="initial-scale=1" /> ?

:: редакция ::
Докато постна и ти вече си намерил решението

 

[BurnX]

От: Въпрос за css за мобилни устройства

Тук може да провериш как изглежда сайта ти на различни устройства -> http://mobiletest.me/

 

[mr_nikolov]

От: Въпрос за css за мобилни устройства

С @media only screen нищо не правиш, реално казваш "Ако това нещо се гледа на дисплей дай този CSS" - ама дисплей е лаптопа, телевизора, смартфона и т.н. Така, че допълваш and (max-width: *** px) или ( min-width ...) към заявката. Прочети малко тук и на други места как се ползват защото явно не си много наясно. Също така може да ползваш bootstrap или да си го свалиш и да му разгледаш CSS-а - частта със заявките.

П.П.: За тест на мобилни устройства използвай developer tools на браузъра за да видиш как се държи. Аз ползвам Opera, но реално в момента тя е едно и също с Хром с тази разлика, че заема по-малко рам защото изпраща по-малко данни за теб на лошите чичковки.

 

[hatre]

От: От: Въпрос за css за мобилни устройства

С @media only screen нищо не правиш, реално казваш "Ако това нещо се гледа на дисплей дай този CSS" - ама дисплей е лаптопа, телевизора, смартфона и т.н. Така, че допълваш and (max-width: *** px) или ( min-width ...) към заявката. Прочети малко тук и на други места как се ползват защото явно не си много наясно. Също така може да ползваш bootstrap или да си го свалиш и да му разгледаш CSS-а - частта със заявките.

П.П.: За тест на мобилни устройства използвай developer tools на браузъра за да видиш как се държи. Аз ползвам Opera, но реално в момента тя е едно и също с Хром с тази разлика, че заема по-малко рам защото изпраща по-малко данни за теб на лошите чичковки.

@media only screen това ми трябваше за разни неща, защото тя темата е готова на WP, с времето аз доста съм я променял и сега искам само да я закърпя да работи на мобилните устройства. Иначе ползвам някакви такива:
@media only screen and (max-width: 600px)
А това bootstrap не ми се учи, аз не се занимавам с програмиране, а и в темите на WP го няма.

 

[hatre]

От: От: Въпрос за css за мобилни устройства

php-то няма никакво отношение така, че дишай спокойно . Сложил ли си <meta name="viewport" content="initial-scale=1" /> ?

Казах за php защото си помислих да не би с php да хващат какво е устройството и ако е мобилно да зареждат друга тема, която е само за мобилно. Ако беше така щях да се откажа.

 

[hatre]

От: Въпрос за css за мобилни устройства

Тук може да провериш как изглежда сайта ти на различни устройства -> http://mobiletest.me/

Тук може да провериш как изглежда сайта ти на различни устройства -> http://mobiletest.me/

Мерси, но аз тези не ги броя за тест, само като видиш снимките и ти става ясно: http://mobiletest.me/themes/grey/images/devices/blackberry_bold_landscape_1x.png
Има едно cross browser, но е платено. Направо ти зарежда различни операционни системи и размери на екрана, реално виждаш че не си в твоя компютър. Преди години много ми хареса, но хубавите неща явно са винаги платени.