Фиксированное положение не работает на мобильном

я на загрузчике 3, пытаясь позиционировать «сообщение с нами» плагин из Facebook в правом нижнем углу страницы:Фиксированное положение не работает на мобильном

<div class="fb-messengermessageus" messenger_app_id="" page_id="" color="blue" size="xlarge"> 
</div> 

footer .fb-messengermessageus { 
    cursor: pointer; 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    z-index: 10; 
}

I't работает отлично на рабочем столе (нормально, даже если размер изменяется до минимальной ширины окна в Chrome), но кнопка отображается неправильно на мобильном устройстве, в частности, она начинается слева, и она скрыта на половину ее размера. Как я могу это исправить?

Для полноты: https://developers.facebook.com/docs/messenger-platform/plugin-reference/message-us

источник

2017-01-13 Jumpa

Я думаю, это должно быть связано с разрешением устройства. Вы играли с настройками мультимедиа? Не могли бы вы определить правильное значение для мета-видового экрана? Вы также можете определить значения differents для столбца, используя bootstrap. Вид col-xs-4 и т. Д. ... –

Привет, EliasMP, не могли бы вы привести пример? Я относительно новичок в этой области. Должен ли я вставить div с кнопкой внутри другого «столбца div»? – Jumpa

Привет @Jumpa, я уверяю вас, что вы кодируете стандартную сеть, и у вас возникают проблемы, когда вы хотите посмотреть ее по мобильному телефону, не так ли? –

Сначала на всех, вы должны определить мета-тег для установки разрешения неподвижного устройства.

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

После этого вы можете определить отзывчивый веб-сайт, используя фреймворк начальной загрузки. Вы должны обернуть все элементы в контейнере.

Затем вы определяете каждую строку в классе yor по строке.

Наконец, bootstrap определяет страницу в сетке, что означает, что она делит страницу на 12 столбцов. Вы можете установить, сколько столбцов вы хотите использовать для каждого элемента.

Например: col-xs-12 означает, что этот элемент заполняет 12 столбцов (все они), когда размер разрешения xs (дополнительно маленький).

Вы можете проверить этот адрес для зная, что-то еще: Grid´s Bootstrap

Гадание вам проблемы может быть это, следующий пример даст вам правильный подход ... Надеясь это помогает ... Любые сомнения, пожалуйста, дайте я знаю ... :)

<div class="container"> 
    <div class="row"> 
    <div class="fb-messengermessageus col-xs-12 col-sm-12 col-md-12 col-lg-12" messenger_app_id="" page_id="" color="blue" size="xlarge"> 
    </div> 
    </div> 
</div>

источник

2017-01-13 08:30:44

Извините, я виноват, что я знаю систему сетки Bootstrap, я думал, что элемент с абсолютным расположением может находиться за пределами системы столбцов/строк. Если вы посмотрите на мой сайт http://giampa.altervista.org/paradise внизу, у меня есть аналогичная кнопка «go to top», которая корректно работает и на мобильных устройствах. – Jumpa

Извините за мой английский. Я не понимаю. Я проверяю вашу страницу, вы имеете в виду кнопку прокрутки вверху, она должна быть исправлена для просмотра, даже когда она прокручивается ... –

Я имел в виду, что кнопка «прокрутка вверх» работает нормально и такая же, как в Facebook кнопка, почему вторая проблема? – Jumpa

Фиксированное положение не работает на мобильном

ответ

Смежные вопросы