Адаптивная верстка и iphone.

[Toleri]

Здравствуйте, уважаемые форумчане.

Проблема следующая.

Есть сайт с адаптивной версткой: grimakva.ru

При проверке сайта в эмуляторах моб устройств все отображается корректно (за исключением меню (оно в процессе).

Но при просмотре сайта непосредственно через айфон (различных моделей и версий ios) фон сайта отображается некорректно, выравнивается по ширине, оставляя внизу большое пространство. При этом прописанные @media screen полностью игнорируются.

В чем может быть ошибка?

Буду рада любым советам и полезным ссылкам, сама к сожалению не нашла ничего.

[VeniVidiVici]

А есть ещё один вариант:

 

Вместо @media (min-width:  ) написать это  @media (min-device-width  )  

Ну и также для max, вроде ios это понимает, попробуйте.

[VeniVidiVici]

Я конечно не супер спец, но если с фоном проблемы, то проверьте, есть ли это:

background-size:cover;

П.с а можно названия эмуляторов, какими вы пользуетесь? (ну или ссылки)

[Igor Schnaider]

Да и на эмуляторе нормально не отображается.

Можно установить min-height: 100% на html и body. Или background-attachment: fixed.

Edited November 29, 2015 by Igor Schnaider

[atlanta]

Не увидел я ответа хоть частично правильного , используйте @media - и в нём точно укажите размеры а в файле .htaccess указать можно и само устройство iphone или же его браузер safari , а так же у вас на странице есть lightbox но понятно что вы убрали кролл но зато блоку gallery дали скролл но примените - https://github.com/mzubala/jquery-custom-scrollbar- вот этот плагин и ваш скроли станет очень красивым

Edited November 29, 2015 by atlanta

[klierik]

эмуляторах

 

Вот как сайт выглядет в симуляторе: http://take.ms/xibT8

Точ в точ он выглядит на iPhone 5s. Я не в курсе какими симуляторами вы тестировали, но я бы им не доверял.

 

Попробуй стили вынести в отдельный файл (styles.css) и написать просто:

@media (max-width: 800px) {    body {         background:url(image/mbg.jpg) center top no-repeat;        background-size: cover;    }    .menu {        width: 70%;    }}

 

 @atlanta, а ты бы перечитал в чем проблема, тогда понял бы что твой ответ не имеет ничего общего с проблемой

[Igor Schnaider]

@media (max-width: 800px) { body { background:url(image/mbg.jpg) center top no-repeat; background-size: cover; } .menu { width: 70%; } }

Так там ведь проблема как раз в background-size: cover, как я понял.

Toleri, странно, что вы ничего не смогли найти по этому вопросу.

[Toleri]

Я конечно не супер спец, но если с фоном проблемы, то проверьте, есть ли это:

background-size:cover;

П.с а можно названия эмуляторов, какими вы пользуетесь? (ну или ссылки)

Да, и в стилях и @media прописано Background-size: cover

 

Эмуляторы: http://webmark.com.ua/mobile/?url=http%3A%2F%2Fwww.grimakva.ru%2F

                     http://quirktools.com/screenfly/#u=http%3A//grimakva.ru&w=320&h=568&a=37

[Toleri]

Не увидел я ответа хоть частично правильного , используйте @media - и в нём точно укажите размеры а в файле .htaccess указать можно и само устройство iphone или же его браузер safari , а так же у вас на странице есть lightbox но понятно что вы убрали кролл но зато блоку gallery дали скролл но примените - https://github.com/mzubala/jquery-custom-scrollbar- вот этот плагин и ваш скроли станет очень красивым

@ media используются и айфон их игнорирует, в этом то и проблема. За плагин спасибо.

 

эмуляторах

 

Вот как сайт выглядет в симуляторе: http://take.ms/xibT8

Точ в точ он выглядит на iPhone 5s. Я не в курсе какими симуляторами вы тестировали, но я бы им не доверял.

 

Попробуй стили вынести в отдельный файл (styles.css) и написать просто:

@media (max-width: 800px) {    body {         background:url(image/mbg.jpg) center top no-repeat;        background-size: cover;    }    .menu {        width: 70%;    }}

 

 @atlanta, а ты бы перечитал в чем проблема, тогда понял бы что твой ответ не имеет ничего общего с проблемой

 

Фоновые стили не могу вынести в отдельный файл, так как к каждой странице сайта, свой отдельный фон, поэтому прописываю непосредственно в html. Но в отдельный стилевой файл вынесены другие параметры, и @media которые прописаны там (параметры различных контейнеров и пр.), так же не применяются к айфону.

Кстати параметры так и прописаны, как предлагаете.

И спасибо за симулятор! ) сохранила в закладки, свои удалю! )

 

@media (max-width: 800px) { body { background:url(image/mbg.jpg) center top no-repeat; background-size: cover; } .menu { width: 70%; } }

Так там ведь проблема как раз в background-size: cover, как я понял.

Toleri, странно, что вы ничего не смогли найти по этому вопросу.

 

Основная проблема в том, что айфон игнорирует @media. Искала на русском ). Возможно искала не совсем так как нужно, но не могу до конца понять в чем загвоздка. Информацию по ссылке посмотрела, с моим английским, с ходу я не разберусь, а от авто-переводчика мозг вообще взрывается ))) Попробую почитать, поковыряться попозже. Спасибо за инфу! )

[atlanta]

 

Не увидел я ответа хоть частично правильного , используйте @media - и в нём точно укажите размеры а в файле .htaccess указать можно и само устройство iphone или же его браузер safari , а так же у вас на странице есть lightbox но понятно что вы убрали кролл но зато блоку gallery дали скролл но примените - https://github.com/mzubala/jquery-custom-scrollbar- вот этот плагин и ваш скроли станет очень красивым

@ media используются и айфон их игнорирует, в этом то и проблема. За плагин спасибо.

 

эмуляторах

 

Вот как сайт выглядет в симуляторе: http://take.ms/xibT8

Точ в точ он выглядит на iPhone 5s. Я не в курсе какими симуляторами вы тестировали, но я бы им не доверял.

 

Попробуй стили вынести в отдельный файл (styles.css) и написать просто:

@media (max-width: 800px) {    body {         background:url(image/mbg.jpg) center top no-repeat;        background-size: cover;    }    .menu {        width: 70%;    }}

 

 @atlanta, а ты бы перечитал в чем проблема, тогда понял бы что твой ответ не имеет ничего общего с проблемой

 

Фоновые стили не могу вынести в отдельный файл, так как к каждой странице сайта, свой отдельный фон, поэтому прописываю непосредственно в html. Но в отдельный стилевой файл вынесены другие параметры, и @media которые прописаны там (параметры различных контейнеров и пр.), так же не применяются к айфону.

Кстати параметры так и прописаны, как предлагаете.

И спасибо за симулятор! ) сохранила в закладки, свои удалю! )

 

@media (max-width: 800px) { body { background:url(image/mbg.jpg) center top no-repeat; background-size: cover; } .menu { width: 70%; } }

Так там ведь проблема как раз в background-size: cover, как я понял.

Toleri, странно, что вы ничего не смогли найти по этому вопросу.

 

Основная проблема в том, что айфон игнорирует @media. Искала на русском ). Возможно искала не совсем так как нужно, но не могу до конца понять в чем загвоздка. Информацию по ссылке посмотрела, с моим английским, с ходу я не разберусь, а от авто-переводчика мозг вообще взрывается ))) Попробую почитать, поковыряться попозже. Спасибо за инфу! )

 

   если у вас не получилось применить медиа запрос на iphone это не говорит о том что это не получится у меня ! вы ни первая и ваше Яблочко тоже ни первое у меня , больше 14 проектов - и пока не было нареканий , всегда под любые мобильные средства используют @media - читайте на htmlbook.ru как правильно делать их 

[Toleri]

 

 

Не увидел я ответа хоть частично правильного , используйте @media - и в нём точно укажите размеры а в файле .htaccess указать можно и само устройство iphone или же его браузер safari , а так же у вас на странице есть lightbox но понятно что вы убрали кролл но зато блоку gallery дали скролл но примените - https://github.com/mzubala/jquery-custom-scrollbar- вот этот плагин и ваш скроли станет очень красивым

@ media используются и айфон их игнорирует, в этом то и проблема. За плагин спасибо.

 

эмуляторах

 

Вот как сайт выглядет в симуляторе: http://take.ms/xibT8

Точ в точ он выглядит на iPhone 5s. Я не в курсе какими симуляторами вы тестировали, но я бы им не доверял.

 

Попробуй стили вынести в отдельный файл (styles.css) и написать просто:

@media (max-width: 800px) {    body {         background:url(image/mbg.jpg) center top no-repeat;        background-size: cover;    }    .menu {        width: 70%;    }}

 

 @atlanta, а ты бы перечитал в чем проблема, тогда понял бы что твой ответ не имеет ничего общего с проблемой

 

Фоновые стили не могу вынести в отдельный файл, так как к каждой странице сайта, свой отдельный фон, поэтому прописываю непосредственно в html. Но в отдельный стилевой файл вынесены другие параметры, и @media которые прописаны там (параметры различных контейнеров и пр.), так же не применяются к айфону.

Кстати параметры так и прописаны, как предлагаете.

И спасибо за симулятор! ) сохранила в закладки, свои удалю! )

 

@media (max-width: 800px) { body { background:url(image/mbg.jpg) center top no-repeat; background-size: cover; } .menu { width: 70%; } }

Так там ведь проблема как раз в background-size: cover, как я понял.

Toleri, странно, что вы ничего не смогли найти по этому вопросу.

 

Основная проблема в том, что айфон игнорирует @media. Искала на русском ). Возможно искала не совсем так как нужно, но не могу до конца понять в чем загвоздка. Информацию по ссылке посмотрела, с моим английским, с ходу я не разберусь, а от авто-переводчика мозг вообще взрывается ))) Попробую почитать, поковыряться попозже. Спасибо за инфу! )

 

   если у вас не получилось применить медиа запрос на iphone это не говорит о том что это не получится у меня ! вы ни первая и ваше Яблочко тоже ни первое у меня , больше 14 проектов - и пока не было нареканий , всегда под любые мобильные средства используют @media - читайте на htmlbook.ru как правильно делать их 

 

О! Ну так я для того и обратилась на форум, что бы знающие люди, мне новичку, подсказали, в чем возможно моя ошибка, как сделать так что бы заработала. Спасибо за конструктивную критику и советы по делу.

[Toleri]

Да и на эмуляторе нормально не отображается.

Можно установить min-height: 100% на html и body. Или background-attachment: fixed.

К большому сожалению, ни то ни то не помогает (

[atlanta]

 

 

 

Не увидел я ответа хоть частично правильного , используйте @media - и в нём точно укажите размеры а в файле .htaccess указать можно и само устройство iphone или же его браузер safari , а так же у вас на странице есть lightbox но понятно что вы убрали кролл но зато блоку gallery дали скролл но примените - https://github.com/mzubala/jquery-custom-scrollbar- вот этот плагин и ваш скроли станет очень красивым

@ media используются и айфон их игнорирует, в этом то и проблема. За плагин спасибо.

 

эмуляторах

 

Вот как сайт выглядет в симуляторе: http://take.ms/xibT8

Точ в точ он выглядит на iPhone 5s. Я не в курсе какими симуляторами вы тестировали, но я бы им не доверял.

 

Попробуй стили вынести в отдельный файл (styles.css) и написать просто:

@media (max-width: 800px) {    body {         background:url(image/mbg.jpg) center top no-repeat;        background-size: cover;    }    .menu {        width: 70%;    }}

 

 @atlanta, а ты бы перечитал в чем проблема, тогда понял бы что твой ответ не имеет ничего общего с проблемой

 

Фоновые стили не могу вынести в отдельный файл, так как к каждой странице сайта, свой отдельный фон, поэтому прописываю непосредственно в html. Но в отдельный стилевой файл вынесены другие параметры, и @media которые прописаны там (параметры различных контейнеров и пр.), так же не применяются к айфону.

Кстати параметры так и прописаны, как предлагаете.

И спасибо за симулятор! ) сохранила в закладки, свои удалю! )

 

@media (max-width: 800px) { body { background:url(image/mbg.jpg) center top no-repeat; background-size: cover; } .menu { width: 70%; } }

Так там ведь проблема как раз в background-size: cover, как я понял.

Toleri, странно, что вы ничего не смогли найти по этому вопросу.

 

Основная проблема в том, что айфон игнорирует @media. Искала на русском ). Возможно искала не совсем так как нужно, но не могу до конца понять в чем загвоздка. Информацию по ссылке посмотрела, с моим английским, с ходу я не разберусь, а от авто-переводчика мозг вообще взрывается ))) Попробую почитать, поковыряться попозже. Спасибо за инфу! )

 

   если у вас не получилось применить медиа запрос на iphone это не говорит о том что это не получится у меня ! вы ни первая и ваше Яблочко тоже ни первое у меня , больше 14 проектов - и пока не было нареканий , всегда под любые мобильные средства используют @media - читайте на htmlbook.ru как правильно делать их 

 

О! Ну так я для того и обратилась на форум, что бы знающие люди, мне новичку, подсказали, в чем возможно моя ошибка, как сделать так что бы заработала. Спасибо за конструктивную критику и советы по делу.

 

понятно - давайте сделаем так - откройте bootstrap - и посмотрите как они стилизовали свою вёрстку - особенно  обратите внимание на @media -  если  не получится , не поймёте что и как то пишите на почту - будем разбираться  что и как , думаю - что справитесь - но вёрстка по safari любой скажет что это ни лёгкая задача - есть три гиганта с особенной сложностью : 1) APPLE SAFARI 2) MICROSOFT IE 3) LINUX MIDORI  - вот с ними и возникают проблемы у каждого  верстальщика - но пишите думаю помогу - но просто я работаю и могу ответить с задержкой

[Toleri]

А есть ещё один вариант:

 

Вместо @media (min-width:  ) написать это  @media (min-device-width  )  

 

Спасибо Вам огромное! Получилось! ))) Вы просто спаситель!

И большое СПАСИБО всем неравнодушным откликнувшимся! )