Отзывчивый фон, сжиженный в портретном мобильном телефоне

Question

У меня проблема с использованием отзывчивых фонов. http://poppykeith.co.uk/index.html выглядит корректно в компьютерных браузерах и в ландшафте в мобильном браузере, однако при просмотре на мобильном телефоне (im, использующем iOS) в портрете изображение сжимается, чтобы соответствовать экрану.

Как я могу сделать изображение, просто увеличив в портретном режиме и не растягиваясь?

Благодаря

Answer 1

Код, который вы написали, почти работает, но правила min-width:1024px и width:100% противоречат друг другу и вызывают эффект скручивания, который вы видите. В основном, width козыри min-width.

Реальная техника, которую вы хотите использовать, чтобы установить это изображение в качестве фона на элемент тела, а затем использовать background-size:cover, чтобы сделать браузер загрузить его соответствующим образом

body { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Подробности: http://css-tricks.com/perfect-full-page-background-image/

Answer 2

проверить эту статью: http://www.teknocat.org/blog/web-development/show/6/mobile-safari-background-image-scaling-quirk

Это говорит о том, как Mobile Safari любит сворачивать большие изображения.