Как отрегулировать фон сайта с помощью javascript для мобильного устройства?

Question

Я только что закончил свой сайт Wordpress для кабаре моего друга. Я сделал несколько Javascript, чтобы настроить фоновое изображение и сделать каждую страницу отличной от другой. Вот как он выглядит на моем компьютере. Example of my website on Firefox - Windows 7

Моя проблема в том, когда дело доходит до моего iPhone, результат действительно не то же самое ... Example on my iPhone using Safari for iOS9

Так как вы можете видеть, соотношение сторон действительно некрасиво на мобильном устройстве. Вот мой код я использую на этой странице, чтобы настроить мой фон:

<script> 
 
document.body.style.backgroundImage = "url('http://cabarettapisrouge.xyz/wp-content/uploads/2015/11/12235379_10207180605785211_985692315_o-e1447975745789.jpg')"; 
 
document.body.style.backgroundAttachment = "fixed"; 
 
document.body.style.backgroundRepeat = "no-repeat"; 
 
document.body.style.backgroundSize= "100% 100%"; 
 
</script>

Так, уже вы можете увидеть, я использую пропорции 100% как на ширину и высоту, чтобы настроить свой имидж, но это не очень хорошо на мобильных устройствах, так как экран отличается. Поэтому я это знаю.

Есть ли способ, которым я мог бы использовать внешний javascript и сказать ему «Если на мобильном устройстве, а затем показать его таким образом»? Я не очень хорошо разбираюсь в Javascript для этой части ...

Даже если это не внешний файл, возможно, я мог бы просто сутуреть мой код, чтобы он работал?

В любом случае, спасибо за помощь, я уверен, что вы все можете мне помочь! Благодаря!

Answer 1

Думаю, вы могли бы попробовать.

document.body.style.backgroundSize= "cover"; 

или

document.body.style.backgroundSize= "contain"; 

Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 2

Как об использовании @media в CSS и загрузки одного или другого изображения на основе каждого устройства или просмотра? (Обратите внимание, что для примера используется «480px», а также вы можете добавлять запросы для обработки пейзажных или портретных представлений или более разрешений).

@media (max-width: 480px) and (orientation: landscape) { 
     background-image: url('url to smaller image here...')"; 
    } 

Или изменить стиль фона в зависимости от устройства, как:

@media (max-width: 480px) and (orientation: landscape) { 
    background-size: 100% auto; 
} 

Или попробуйте CSS width: 100%; height: auto; на фоновое изображение.

Надеюсь, что это поможет!