#visual-web-developer
#visual-web-developer
Вопрос:
Мне пришлось адаптировать HTML-сайт для работы на MediaWiki. Веб-сайт находится по адресу http://2016.igem.org/Team:UrbanTundra_Edmonton . Сначала было много ошибок, поскольку MediaWiki в основном ограничивает вас текстовым редактором, чтобы выполнять всю вашу работу, а не просто иметь .HTML-файлы на сервере. Тем не менее, я смог исправить большинство ошибок. Единственная и, возможно, самая серьезная ошибка — это отзывчивость веб-сайта.
Например, если вы измените размер веб-сайта в окне Google Chrome, веб-сайт будет вести себя и выглядеть нормально. Однако, когда вы открываете тот же веб-сайт на мобильном телефоне, переключатель навигации перемещается за пределы экрана, и общий макет распадается. Просмотр веб-сайта с помощью различных сред даст лучшее понимание по сравнению с моим тусклым описанием.
На самом деле это было более серьезной проблемой, прежде чем я решил обратиться сюда за помощью. Я в основном использовал ‘Inspect Element’ в Chrome, чтобы изменить кучу значений отступов и полей, чтобы все выглядело красиво. И действительно, в измененном окне Chrome это выглядит нормально.
Затем я попытался использовать мобильный эмулятор Chrome (встроенный в инструменты разработчика) и использовать метод проб и ошибок, но безрезультатно.
Мне было интересно, может ли кто-нибудь мне помочь или, по крайней мере, дать мне несколько советов о том, как я мог бы использовать то, что отображается в измененном окне Chrome, и отображать это на мобильных устройствах?
Комментарии:
1. У вас есть тег meta viewport?
2. Да, я знаю. На самом деле, изначально у меня его не было, и я столкнулся со многими проблемами. После его добавления было исправлено множество проблем с точки зрения быстродействия. Вы просматривали веб-сайт в обновленном окне Chrome по сравнению с мобильным телефоном?
Ответ №1:
Найден ответ! Мой мета-тег читается как:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
На самом деле мне просто нужно было добавить масштабируемый пользователем параметр и установить для него значение no! Так что знайте, что это звучит как:
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0;" />
Теперь все работает так, как задумано!