Oh! Android
  1. Oh! Android
  3. Background-size: обложка не работает в портрете на планшете Android

Background-size: обложка не работает в портрете на планшете Android

Я использую свойство background-size для полного изображения по ширине и высоте, но у меня проблемы с его полным покрытием в Chrome на планшете Nexus7 в портретном режиме. Он охватывает только ширину, а не высоту, то есть ниже 200px белого пространства ниже нее. Однако, когда я просматриваю сайт на рабочем столе Chrome (или что-то еще) и на вертикальном мониторе, чтобы имитировать портретные размеры, он не вызывает проблем.

У кого-нибудь есть решение?

CSS: 

 html { background: url(/images/post_bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/post_bg.jpg', sizingMethod='scale')"; }

Портретный снимок экрана:

Я считаю, что вы можете исправить это, указав высоту тегов html и body в CSS, например: 

 html{ height:100%; min-height:100%; } body{ min-height:100%; }

надеюсь это поможет

Я знаю, что прошло много времени с тех пор, как был задан вопрос, но я только что нашел ответ, который я думаю. Для меня фоновый размер: обложка работает в Android Browser и Android Chrome, если вы опускаете «фиксированный» в справочной инструкции CSS. После некоторых тестов он работает для меня, делая изображение фон DIV: 

 #yourDivSelectorHere { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 0; background-image: url(/img/backgrounds/1.jpg) ; background-repeat:no-repeat; background-position: center center; /* background-attachment: fixed; removed for Android */ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

}

DIV сам по себе фиксирован в позиции (в отличие от фонового изображения), составляет 100% ширины и высоты и размещается в задней части всего. Это немного лишнее усилие, а не просто добавление фонового изображения в HTML или BODY, но для меня это работает во всех браузерах, которые я тестировал до сих пор (FF, Chrome, IE8, IE9, Safari), на iPad2 и Android Chrome и Android-браузер.

Я предоставлю решение, которое я нашел, если кто-то столкнется с этим в будущем. Вместо использования фонового изображения я использовал <img> :

HTML: 

 <img id="full_bg" src="/images/post_bg.jpg" alt="Post your project on CustomMade">

CSS: 

 #full_bg { height: auto; left: 0; min-height: 100%; min-width: 1024px; position: fixed; top: 0; width: 100%; } @media screen and (max-width: 1024px) { #full_bg { left: 50%; margin-left: -512px; } }

Это работало кросс-браузер и на мобильных устройствах. Я нашел решение здесь .

Ну, я могу придумать другое решение: я добавил его к телу, и все, что вам нужно позаботиться, это то, что привязка background: fixed – последнее правило:

работает: 

 body { height:100%; width:100%; background-size:cover; background-repeat:no-repeat; background-position: center center; background-attachment:fixed; }

Не работает: 

 body { height:100%; width:100%; background-size:cover; background-attachment:fixed; background-repeat:no-repeat; background-position: center center; }

Это действительно трогательно, что телефонные аппараты, в общем, немного багги …

Используйте HTML-фон вместо тела и дайте высоту: 100% 

 html { height:100%; background: url(bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Я обнаружил еще одно решение, использующее бит jquery stuff. Исправление основано на предположении, что мы используем изображение в ландшафтном измерении / пропорции для фона.

Step1: сравните «высоту окна» и «высоту содержимого страницы»,

Step2: если «высота окна» меньше, чем «высота содержимого страницы»,

Step3: применить это к тегу body

HTML { 

 <body style="background-size: auto 'page content height'; background-attachment: scroll;">

}

скрипт 

 var wHeight = $(window).height(); var bodyHeight = $('page-content-element').height(); if(wHeight < bodyHeight){ $('body').attr('style', 'background-size: auto '+ (bodyHeight*1.1) +'px;background-attachment: scroll;'); } else{ $('body').removeAttr('style'); }

Назовите это на загрузку страницы и измените размер окна

Это решение работало и для меня, и для Android 

 html{ height:100%; min-height:100%; } body{ min-height:100%; }
Intereting Posts
Android, Handler работает в основном потоке или другом потоке? Pixel-Perfect Collision Detection Android Ошибка анализа XML с помощью кнопки facebook Интегрировать facebook с аналогичной кнопкой в ​​Android и iphone Проблема раздувания пользовательского представления для AlertDialog в DialogFragment Диалоговая активность – текст разрезается в андроиде Использовать список массивов объектов в качестве адаптера счетчика Volley Bug: повторение запроса при включении подробного ведения журнала Какие существуют инструменты, которые предлагают защиту apk для Android (против реверсирования и переупаковки)? Отключение тройного нажатия на устройства Android Размер предварительного просмотра для сканера штрих-кода от зрения api Android Web-View shouldOverrideUrlLoading () Устаревший. (Альтернативный) Android: несколько уведомлений в виде единого списка в строке состояния MapView onCLick Event Listener Переключение между фрагментами в одном действии