Размер шахматной доски не изменяется с помощью события css `media` (chessboard.js) ⇐ CSS
-
Anonymous
Размер шахматной доски не изменяется с помощью события css `media` (chessboard.js)
Я создал многопользовательскую шахматную игру с помощью node.js и Chessboard.js, и все работало нормально, пока я не начал тестировать на устройствах с меньшими окнами просмотра, чем у меня (у меня 24 дюйма). Проблема заключалась в том, что доска этого не делала. поместится на экране! Чтобы сделать шахматную игру доступной как для больших, так и для меньших окон просмотра, я использовал media в CSS:
@media only screen и (максимальная ширина: 600 пикселей) { #моя-доска { ширина: 500 пикселей; // Моя доска имеет размер 800 пикселей в начале. } } Теперь вот в чем загвоздка: размер доски не изменяется. Или, скорее, он меняет размер, но после того, как пользователь обновил свой экран, что отстой, потому что игра использует Socket.io, и если он/она обновляется, алгоритм думает, что пользователь отключился (что приводит к выдаче пользователь, которому осталась заслуга выигрыша).
Вот наименьший воспроизводимый образец (у вас должна быть установлена библиотека шахматной доски):
#myBoard { ширина: 700 пикселей; } .main-контейнер { выравнивание текста: по центру; } #контейнер { высота: 30%; } тело { отступ слева: 30 пикселей; отступ справа: 30 пикселей; } #игровая доска { выравнивание текста: по центру; } #chessboard-background { высота: 95%; /* ширина:авто; */ } #scroll-pgn { максимальная ширина: 700 пикселей; } #liveAlertPlaceholder { поле: 20 пикселей; } Можно ли это исправить? Или он интегрирован с самой библиотекой шахматной доски.js? Спасибо за любой ответ.
ИЗМЕНИТЬ
Полный код: https://github.com/marsianjohncarter/Chess
ПРЯМОЙ ЭФИР (может немного подгрузиться)
https://chess-website-completed.onrender.com/
Я создал многопользовательскую шахматную игру с помощью node.js и Chessboard.js, и все работало нормально, пока я не начал тестировать на устройствах с меньшими окнами просмотра, чем у меня (у меня 24 дюйма). Проблема заключалась в том, что доска этого не делала. поместится на экране! Чтобы сделать шахматную игру доступной как для больших, так и для меньших окон просмотра, я использовал media в CSS:
@media only screen и (максимальная ширина: 600 пикселей) { #моя-доска { ширина: 500 пикселей; // Моя доска имеет размер 800 пикселей в начале. } } Теперь вот в чем загвоздка: размер доски не изменяется. Или, скорее, он меняет размер, но после того, как пользователь обновил свой экран, что отстой, потому что игра использует Socket.io, и если он/она обновляется, алгоритм думает, что пользователь отключился (что приводит к выдаче пользователь, которому осталась заслуга выигрыша).
Вот наименьший воспроизводимый образец (у вас должна быть установлена библиотека шахматной доски):
#myBoard { ширина: 700 пикселей; } .main-контейнер { выравнивание текста: по центру; } #контейнер { высота: 30%; } тело { отступ слева: 30 пикселей; отступ справа: 30 пикселей; } #игровая доска { выравнивание текста: по центру; } #chessboard-background { высота: 95%; /* ширина:авто; */ } #scroll-pgn { максимальная ширина: 700 пикселей; } #liveAlertPlaceholder { поле: 20 пикселей; } Можно ли это исправить? Или он интегрирован с самой библиотекой шахматной доски.js? Спасибо за любой ответ.
ИЗМЕНИТЬ
Полный код: https://github.com/marsianjohncarter/Chess
ПРЯМОЙ ЭФИР (может немного подгрузиться)
https://chess-website-completed.onrender.com/
